const stepperContent = `<section class='step-indicator'> <div class='step step1 active' onclick='navigateToStep(1)'> <div class='step-icon'></div> </div> <div class='indicator-line active'></div> <div class='step step2' onclick='navigateToStep(2)'> <div class='step-icon'> </div> </div> <div class='indicator-line'></div> <div class='step step3' onclick='navigateToStep(3)'> <div class='step-icon'> </div> </div> </section>`; const customStepper = document.querySelector('.custom-stepper'); function navigateToStep(step) { updateFormCookie(); var currentStep = window.location.pathname; var newStep = currentStep.replace(/\/(\d+)$/, `/${step}`); var queryString = window.location.search; var nextPage = window.location.origin + newStep + queryString; window.location.href = nextPage; };  if (customStepper) { customStepper.parentElement.insertAdjacentHTML('beforeend', stepperContent); var cookie = document.cookie.match(new RegExp('(^| )' + 'form' + '=([^;]+)')); if(cookie != null){ var cookieValue = cookie[2]; var dataArray = JSON.parse(decodeURIComponent(cookieValue)); for (let i = 0; i < dataArray.length; i++) { const element = document.querySelector(`.step${i + 1}`); if (element) { element.classList.add('active'); } }; } }