Is there a way to create a back button for a multistep form isn't HTML based?

Question

I have a dataset manager that uses checkboxes for user input but not in an HTML form. After the user clicks on the button, a function occurs that changes the display of the elements (below is the part of the function that changes the elements between the first step and the second step).

I want to create a back button for each step so that the user can go back to each individual step with all input being blank (including the Yes/No button in the second step, since it disables after one of them is selected). I used history.pushState(updateStepNum(), '', "?step=2"); for updating the URL after the Create button was pressed, but when I click on the back button in my browser, the URL changes into having "?step=1", but the page doesn't change (likely because the history is visibility-based?).

updateStepNum() changes the step number based on whether a div is displayed or not. I'm using SlickGrid for displaying the table.

Div ID = FirstStep

Div ID = SecondStep

Please let me know if any additional information is needed.

if (document.getElementById("dyadYear").checked){ //radio button that's selected in image 1
        document.getElementById("qChooseCY").style.display = "block"; //div in second step of form
        changeButton();
}
else if(document.getElementById("countryYear").checked){
    changeButtonSecondStep();
}
    
document.getElementById("optionsPanel").style.display = "inline-block";
document.getElementById("FirstStep").style.display = "none"; //current step is hidden
document.getElementById("SecondStep").style.display = "block"; //second step is shown

Answer 1

I figured this out after using Rylee's suggestion in the comments under my question. I reversed the visibilities, which didn't negatively impact the table. Since I was using SlickGrid, it re-initialized each time I ran the function for table creation, so it was reversible.

I'm not sure how this would impact regular HTML tables, though.