Faux jquery pages
<p>I have been learning jQuery and trying to build a faux multipage form, the next button appears to work fine, but the previous page button does not. Being that it is based on the same logic, I can't figure out what is causing my problem (it jumps back to index of 1 rather than the previous page index).</p>

<p>Any assistance would be greatly appreciated. </p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Faux Multipage Form&lt;/title&gt;
&lt;style&gt;
#container {
  font-family: arial;
  width: 600px;
  margin: 0 auto;
}

form.multipage {
  width: inherit;
}

fieldset {
  width: inherit;
  background: #fff;
  border: none;
}

legend {
  font-size: 2em;
}

label {
  display: block;
}

button { 
  background: black;
  color: #fff;
  border: #222;
  border-radius: 20px;
  padding: 5px 20px;
  display: block;
  margin: 20px 10px;
  clear: left;
}
button.next { float: right;}
button.previous { float: right;}

button:hover {
  background: #666;
}
input[type=text] {
  width: 550px;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="container"&gt;

&lt;form id="form" class="multipage" name="checkout"&gt;
&lt;fieldset&gt;
    &lt;legend&gt;Contact Details&lt;/legend&gt;
    &lt;label for="your_name"&gt;Your Name&lt;/label&gt;
    &lt;input type="text" value="" name="your_name"&gt;

    &lt;label for="your_phone"&gt;Your Phone&lt;/label&gt;
    &lt;input type="text" value="" name="your_phone"&gt;

    &lt;label for="your_address"&gt;Your Address&lt;/label&gt;
    &lt;input type="text" value="" name="your_address"&gt;
&lt;/fieldset&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Shipping Details&lt;/legend&gt;
    &lt;label for="shipping_name"&gt;Shipping Name&lt;/label&gt;
    &lt;input type="text" value="" name="shipping_name"&gt;

    &lt;label for="shipping_phone"&gt;Shipping Phone&lt;/label&gt;
    &lt;input type="text" value="" name="shipping_phone"&gt;

    &lt;label for="shipping_address"&gt;Shipping Address&lt;/label&gt;
    &lt;input type="text" value="" name="shipping_address"&gt;
&lt;/fieldset&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Payment&lt;/legend&gt;
    &lt;label for="payment_type"&gt;Payment Type&lt;/label&gt;
    &lt;select name="payment_type"&gt;
      &lt;option&gt;VISA&lt;/option&gt;
      &lt;option&gt;MasterCard&lt;/option&gt;
      &lt;option&gt;Diners&lt;/option&gt;
    &lt;/select&gt;

    &lt;label for="creditcard"&gt;Credit Card&lt;/label&gt;
    &lt;input type="text" value="" name="creditcard"&gt;
&lt;/fieldset&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Review&lt;/legend&gt;
    &lt;div id="review_order" style="height: 200px; background: #efefef"&gt;&lt;/div&gt;
    &lt;input type="submit" name="submit"&gt;
&lt;/fieldset&gt;
&lt;/form&gt;

&lt;/div&gt; &lt;!--! end of #container --&gt;


&lt;script&gt;window.jQuery || document.write('&lt;script src="js/libs/jquery-1.7.1.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var multipageForm = {

init: function(formName) {

  var form = 'form[name=' + formName + ']';
  var fieldsets = $(form + ' fieldset');
  var totalFieldSets = fieldsets.length;

  for (var i = 0; i &lt; fieldsets.length; i++) {
    var fieldset = fieldsets[i];

    // Hide the fieldsets
    multipageForm.hidePages(fieldset, i);
    // Create the buttons
    multipageForm.createButtons(fieldset, i, totalFieldSets, form);

  };
},

createButtons: function(fieldset, index, totalFieldSets, form) {
  var thisPage = index;     
    index = index + 1,
    nextPage = index,
    prevPage = index - 1;


  if (index != totalFieldSets) {  
    var nextButton = '&lt;button class="next" date-role="button" data-gotopage="' + nextPage + '"&gt;Next&lt;/button&gt;';
    $(fieldset).append(nextButton).on('click', 'button.next',  function(event){
          var nextLink = $(this).data('gotopage');
          $(form + ' fieldset:eq(' + thisPage + ')').hide();
          $(form + ' fieldset:eq(' + nextLink + ')').show();
      return false;
    });
  }

  if (index != 1) {
    var prevButton = '&lt;button class="previous" date-role="button" data-gotopage="' + prevPage + '"&gt;Previous&lt;/button&gt;';
    $(fieldset).append(prevButton).on('click', 'button.previous',  function(event){
          var nextLink = $(this).data('gotopage');
          $(form + ' fieldset:eq(' + thisPage + ')').hide();
          $(form + ' fieldset:eq(' + PrevLink + ')').show();
      return false;
    });
  }

},

hidePages: function(fieldset, index) {
  // Hide all fieldsets except the first fieldset
  if (index &gt; 0) {
    $(fieldset).hide();
  }
}

};

multipageForm.init('checkout');
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
