might be best explained with an example/scenario:

1. I have several checkboxes on my form. "Open" and "Opening soon" are the default options that has been ticked.

2. JS will trigger on page load and does an initial search based on the 2 options mentioned above. Let's assume only 50 records are returned with these 2 options.

3. If I select another option (let's say "closed"), JS will auto-trigger again and does an API/AJAX call to retrieve the results. Let's assume again that 75 records are returned with these 3 options.

4. As an example, let's assume one of the results is a link to something called "KFC branch X". If I clicked "KFC Branch X" link, the page will open on the same browser tab.

5. If I then clicked the back button, I am expecting to see 75 records (based on no.3). I instead get only 50 records.

What changes do I need to make so that I get 75 records vs 50 records based on my example/scenario? Thank you!

PS.

1. I do not want to open the link on a new tab. I have a feeling this is bad user experience based on what I've heard/experienced.

2. I've already thought of suggesting disabling the auto-search feature (on page load) which may or may not work. (I have not tried it yet)

As a test, I tried this code (which does --not-- work)

    //"this" in the code below pertains to the checkbox element that is ticked/unticked
    if (this.checked) {
        this.setAttribute("checked", true);
    } else {
        this.setAttribute("checked", false);
    }

I can see the DOM/HTML of the page getting modified (using inspect feature of browser). I can see "checked=true" or "checked=false" getting added/inserted to the checkbox DOM.