title: Keep form data with back button
body: <p>there are many questions similar to this but none of them seem to help with my situation.</p>
  
  <p>I am developing a three step process using Javascript and html </p>
  
  <p>I have 2 forms in the first two steps.each with a next/prev button
  I need to be able to go back from step two back to step 1 and still have step ones form data in the fields. I am rather new to javascript any help would be appreciated. I am unsure how to save the form data and then insert it when the user goes back from step 2</p>
  
  <p>EDIT:
  I have decided to use JS to hide/show forms, please can someone tell me why my variable never gets to currentStep == 3; this causes issues when going back as it goes back to step one becasue the currentStep value is stuck at 2</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentStep = 1;
  
  function nextStep() {
  
  if (currentStep ===1){
    
          $("#petmain1").hide();
    $("#petmain2").show();
    $("#addproduct").show();
    $("#firstimage").hide();
    $("#secondimage").show();
    currentStep = 2;
    console.log("Current step is " + currentStep);
          
   }else if(currentStep ===2){
    
    $("#petmain2").hide();
    $("#addproduct").hide();
    $("#secondimage").hide();
    $("#petmain3").show();
    $("#thirdimage").show();
    $("#firstimage").hide();
    currentStep === 3;
    console.log("Current step is " + currentStep);
    
   }
  
  }
  function prevStep() {
   
  
  if (currentStep ===2){
          $("#petmain1").show();
    $("#petmain2").hide();
    $("#addproduct").hide();
    $("#firstimage").show();
    $("#secondimage").hide();
    currentStep = 1;
    console.log("Current step is " + currentStep);
   }else if(currentStep === 3){
    $("#petmain3").hide();
    $("#thirdimage").hide();
    $("#secondimage").show();
    $("#petmain2").show();
    $("#addproduct").show();
    currentStep === 2;
    console.log("Current step is " + currentStep);
   }
  
  }</code></pre>
  </div>
  </div>
  </p>