Keep form data with back button
<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>