Bootstrap progress bar wizard stuck
<p>When you click Continue through the steps, then click Previous on Step 5, then click Continue (on Step 4), the progress bar doesn't move forward. It seems to get stuck. Any idea as to why this is happening?</p>

<p><a href="http://jsfiddle.net/hmwqkpjf/8/" rel="nofollow">http://jsfiddle.net/hmwqkpjf/8/</a></p>

<pre><code>&lt;div class="tab-pane fade" id="step4"&gt;
    &lt;div class="well"&gt;
        STEP4
    &lt;/div&gt;
    &lt;a data-step="3" data-toggle="tab" href="#step3" class="btn btn-default pull-left"&gt;Previous Step&lt;/a&gt;
     &lt;a class="btn btn-default next" href="#"&gt;Continue&lt;/a&gt;
  &lt;/div&gt;

&lt;div class="tab-pane fade" id="step5"&gt;
    &lt;div class="well"&gt;
      STEP5
    &lt;/div&gt;
    &lt;a data-step="4" data-toggle="tab" href="#step4" class="btn btn-default pull-left"&gt;Previous Step&lt;/a&gt;
     &lt;a class="btn btn-success first" href="#"&gt;Start over&lt;/a&gt;
  &lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>$('.next').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');
  return false;

})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

  //update progress
  var step = $(e.target).data('step');
  var percent = (parseInt(step) / 5) * 100;

  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of 5");

  //e.relatedTarget // previous tab

})

$('.first').click(function(){

  $('#myWizard a:first').tab('show')

})
</code></pre>