I have a multi-step form with "next" and "previous" buttons that dynamically change the content. I want to use pushState so that the customer can also click the "previous" and "forward" buttons on his browser and mimic the same behavior.

This is where I got so far: when the user presses the browser back button, the page does go back as expected, but it's missing content, and also the previous form fields are unfilled or dysfunctional. It's very hard for me to understand what exactly is going on...

Here is my code:

$(document).on('click', '.next-button', function () {
  window.history.pushState($(".one-shot-form").html(), '', "");
});

$(window).on("popstate", e => {
    $(".one-shot-form").html(e.originalEvent.state);
});

Note: ".one-shot-form" is the name of the form's container, for which I want to dynamically change the content.

Any help would be dearly appreciated!