title: Faux jquery pages
body: <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>