Bootstrap nav-tabs with progress bar

I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page. I am trying to setup the JQuery so that the progress bar advances with the nav-tabs. Here is a visual.

I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent.

Something like this:

$(document).ready(function () {
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     if (".nav-tabs") hasClass(".active"); {
       $(".checkout-bar li").addClass("active");
     }
   });
});

I am attaching a CODEPEN

Any idea on how to do this client side? I'd rather keep C# out of this one