Multi-step registration form remembers the step

//jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function() { if (animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({ opacity: 0 }, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50) + "%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'transform': 'scale(' + scale + ')', 'position': 'absolute' }); next_fs.css({ 'left': left, 'opacity': opacity }); }, duration: 800, complete: function() { current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function() { if (animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({ opacity: 0 }, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1 - now) * 50) + "%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'left': left }); previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity }); }, duration: 800, complete: function() { current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); var elements = document.querySelectorAll('input, textarea'); for (i = 0; i < elements.length; i++) { (function(element) { var id = element.getAttribute('id'); element.value = localStorage.getItem(id); element.oninput = function() { localStorage.setItem(id, element.value); }; })(elements[i]); } 

 /*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * { margin: 0; padding: 0; } html { height: 100%; background: #6441A5; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #6441A5, #2a0845); /* Chrome 10-25, Safari 5.1-6 */ } body { font-family: montserrat, arial, verdana; background: transparent; } /*form styles*/ #msform { text-align: center; position: relative; margin-top: 30px; } #msform fieldset { background: white; border: 0 none; border-radius: 0px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; /*stacking fieldsets above each other*/ position: relative; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 0px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 13px; } #msform input:focus, #msform textarea:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 1px solid #ee0979; outline-width: 0; transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; -moz-transition: All 0.5s ease-in; -o-transition: All 0.5s ease-in; } /*buttons*/ #msform .action-button { width: 100px; background: #ee0979; font-weight: bold; color: white; border: 0 none; border-radius: 25px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979; } #msform .action-button-previous { width: 100px; background: #C5C5F1; font-weight: bold; color: white; border: 0 none; border-radius: 25px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button-previous:hover, #msform .action-button-previous:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1; } /* mainheadings*/ .fs-main-title { font-size: 30px; /* text-transform: uppercase;*/ color: #FFF; margin-bottom: 10px; letter-spacing: 2px; font-weight: bold; } /*headings*/ .fs-title { font-size: 18px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; letter-spacing: 2px; font-weight: bold; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; letter-spacing: 1px; } #progressbar li:before { content: counter(step); counter-increment: step; width: 24px; height: 24px; line-height: 26px; display: block; font-size: 12px; color: #333; background: white; border-radius: 25px; margin: 0 auto 10px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after { background: #ee0979; color: white; } /* Not relevant to this form */ .dme_link { margin-top: 30px; text-align: center; } .dme_link a { background: #FFF; font-weight: bold; color: #ee0979; border: 0 none; border-radius: 25px; cursor: pointer; padding: 5px 25px; font-size: 12px; } .dme_link a:hover, .dme_link a:focus { background: #C5C5F1; text-decoration: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>smo1in||registration Form</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <div class="container"> <h1 class="span12 fs-main-title text-center">smo1in</h1> <h2 class="span12 fs-title text-center" style="color: red">Registration Form</h2> </div> <!-- MultiStep Form --> <div class="row"> <div class="container"> <form id="msform" action="submit.php" method="post"> <!-- progressbar --> <ul id="progressbar"> <li class="active">Personal Details</li> <li>Adress Details</li> <li>Comment</li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Personal Details</h2> <h3 class="fs-subtitle">Tell us about you</h3> <input type="text" id="first_name" placeholder="Your First Name" required="" /> <input type="text" id="second_name" placeholder="Your Second Name" required="" /> <input type="text" id="phone" placeholder="Phone" required="" /> <button type="button" name="next" class="next action-button">NEXT</button> </fieldset> <fieldset> <h2 class="fs-title">Adress Details</h2> <h3 class="fs-subtitle">Enter Your Address</h3> <input type="text" id="street" placeholder="Street" required="" /> <input type="text" id="building" placeholder="Building №" required="" /> <input type="text" id="city" placeholder="City" required="" /> <button type="button" name="previous" class="previous action-button-previous">PREVIOUS</button> <button type="button" name="next" class="next action-button">NEXT</button> </fieldset> <fieldset> <h2 class="fs-title">Comment</h2> <h3 class="fs-subtitle">Fill in your comment</h3> <textarea id="comment" placeholder="Comments"></textarea> <button type="button" name="previous" class="previous action-button-previous">PREVIOUS</button> <button type="submit" name="submit" class="submit action-button">SUMBIT</button> </fieldset> </form> </div> </div> <!-- /.MultiStep Form --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script> <script src="js/index.js"></script> </body> </html>