title: bootstrap wizard fails to load remaining tabs
body: <p>I'm using jquery,bootstrapWizard plugin to turn a standard form into a wizard. I've had this working but in a re-write of the form and updating jquery and associated scripts I've corrupted the form and can't see what's gone wrong.</p>
  
  <p>I'm using bootstrap version 3.1.1. Jquery 2.01 
  My form has 4 tabs and in appearance is set up correctly. I can navigate to each tab using the navigation buttons at the top of the form however I cannot navigate beyond the second page using the next button.</p>
  
  <p>I thought initially the validation was causing the problem so removed the validation scripts for now but the problem still occurs.</p>
  
  <p>Navigating with the buttons the final submit button doesnt appear. I'm not sure whether my html is the problem - although I've used a standard set up, or whether it's either the plugin script, or my set up script.</p>
  
  <p>I'll set up a fiddle but has anyone come across this problem before</p>
  
  <p><strong>here's the basic wizard html:</strong></p>
  
  <pre><code>  &lt;form action="dummy"&gt;
      &lt;div class="wizard-form"&gt;
              &lt;div class="wizard-content"&gt;
                &lt;ul class="nav nav-pills nav-justified steps"&gt;
                  &lt;li&gt;
                    &lt;a href="#step1" data-toggle="tab" class="wiz-step active"&gt;
                      &lt;span class="step-number"&gt;1&lt;/span&gt;
                      &lt;span class="step-name"&gt;
                        &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                        Article Details
                      &lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;a href="#step2" data-toggle="tab" class="wiz-step"&gt;
                      &lt;span class="step-number"&gt;2&lt;/span&gt;
                      &lt;span class="step-name"&gt;
                        &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                        Article Content
                      &lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href="#step3" data-toggle="tab" class="wiz-step"&gt;
                      &lt;span class="step-number"&gt;3&lt;/span&gt;
                      &lt;span class="step-name"&gt;
                        &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                        Images and Files
                      &lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href="#step4" data-toggle="tab" class="wiz-step"&gt;
                      &lt;span class="step-number"&gt;4&lt;/span&gt;
                      &lt;span class="step-name"&gt;
                        &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                        Attributes and Submit
                      &lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
                &lt;div id="bar" class="progress progress-striped progress-sm active" role="progressbar"&gt;
                  &lt;div class="progress-bar progress-bar-warning"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="tab-content"&gt;
  
                  &lt;div class="alert alert-danger display-none"&gt;
                    &lt;a class="close" aria-hidden="true" href="#" data-dismiss="alert"&gt;×&lt;/a&gt;
                    Your article has errors. Please correct them to proceed.
                  &lt;/div&gt;
                  &lt;div class="alert alert-success display-none"&gt;
                    &lt;a class="close" aria-hidden="true" href="#" data-dismiss="alert"&gt;×&lt;/a&gt;
                    Your form validation is successful!
                  &lt;/div&gt;
                  &lt;!-- TAB PANE 1 --&gt;
                  &lt;div class="tab-pane active" id="step1"&gt;
                    &lt;p&gt;Tab 1&lt;/p&gt;
  
  
                  &lt;/div&gt;
                  &lt;!-- TAB PANE 2 --&gt;
                  &lt;div class="tab-pane" id="step2"&gt;
  
                   &lt;p&gt;Tab 2&lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;!-- TAB PANE 3 --&gt;
                  &lt;div class="tab-pane" id="step3"&gt;
                    &lt;p&gt;Tab 3&lt;/p&gt;
  
                  &lt;/div&gt;
  
                  &lt;!-- TAB PANE 4 --&gt;
                  &lt;div class="tab-pane" id="step4"&gt;
                    &lt;p&gt;Tab 4&lt;/p&gt;
  
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="wizard-buttons"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-12"&gt;
                  &lt;div class="col-md-offset-3 col-md-9"&gt;
                    &lt;a href="javascript:;" class="btn btn-default prevBtn"&gt;
                      &lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;
                      Back
                    &lt;/a&gt;
                    &lt;a href="javascript:;" class="btn btn-primary nextBtn"&gt;
                      Continue
                      &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;a href="javascript:;" class="btn btn-success submitBtn"&gt;
                      Submit
                      &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p><strong>and here's the wizard script:</strong></p>
  
  <pre><code>var FormWizard = function() {
  console.log("setting up form");
  return {
      init: function() {
          if (!jQuery().bootstrapWizard) {
              return;
          }
  
          var wizform = $('#myForm');
          var alert_success = $('.alert-success', wizform);
          var alert_error = $('.alert-danger', wizform);
  
  
  
          /*-----------------------------------------------------------------------------------*/
          /*  Initialize Bootstrap Wizard
          /*-----------------------------------------------------------------------------------*/
          $('#formWizard').bootstrapWizard({
              'nextSelector': '.nextBtn',
              'previousSelector': '.prevBtn',
              onNext: function(tab, navigation, index) {
                  alert_success.hide();
                  alert_error.hide();
  
                  var total = navigation.find('li').length;
                  console.log("Total:", total);
                  var current = index + 1;
                  console.log("current:", current)
                  $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                  jQuery('li', $('#formWizard')).removeClass("done");
                  var li_list = navigation.find('li');
                   for (var i = 0; i &lt; index; i++) {
                       jQuery(li_list[i]).addClass("done");
                   }
                  if (current == 1) {
                      $('#formWizard').find('.prevBtn').hide();
                  } else {
                      $('#formWizard').find('.prevBtn').show();
                  }
                  if (current &gt;= total) {
                      $('#formWizard').find('.nextBtn').hide();
                      $('#formWizard').find('.submitBtn').show();
                  } else {
                      $('#formWizard').find('.nextBtn').show();
                      $('#formWizard').find('.submitBtn').hide();
                  }
              },
              onPrevious: function(tab, navigation, index) {
                  alert_success.hide();
                  alert_error.hide();
                  var total = navigation.find('li').length;
                  var current = index + 1;
                  $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                  jQuery('li', $('#formWizard')).removeClass("done");
                  var li_list = navigation.find('li');
                  for (var i = 0; i &lt; index; i++) {
                      jQuery(li_list[i]).addClass("done");
                  }
                  if (current == 1) {
                      $('#formWizard').find('.prevBtn').hide();
                  } else {
                      $('#formWizard').find('.prevBtn').show();
                  }
                  if (current &gt;= total) {
                      $('#formWizard').find('.nextBtn').hide();
                      $('#formWizard').find('.submitBtn').show();
                  } else {
                      $('#formWizard').find('.nextBtn').show();
                      $('#formWizard').find('.submitBtn').hide();
                  }
              },
              onTabClick: function(tab, navigation, index) {
                   bootbox.alert('On Tab click is disabled');
                   return false;
              },
              onTabShow: function(tab, navigation, index) {
                   var total = navigation.find('li').length;
                   var current = index + 1;
                   var $percent = (current / total) * 100;
                   $('#formWizard').find('.progress-bar').css({
                       width: $percent + '%'
                   });
              }
          });
  
  
  
          $('#formWizard').find('.prevBtn').hide();
  
  
      }
  };
  </code></pre>
  
  <p><strong>Update:</strong>
  I added a couple of console.logs to get index etc as per question below placed in the onNext event. After the first click the index is shown as 1 which would be correct but does not increment any further. </p>
  
  <p>I just realised also that the back button doesn't work either. So it gets to tab 2 (index 1) and gets stuck</p>