HTML like so:

<input type='checkbox' name='example3' id='example3' class='examplesection'>
<label for='example3' class='examplesection'>
    <div class='examplecontent'>
        Lorem ipsum dolor
        <img src='someimage.png'>
        A man a plan a canal Panama
        <div id='example3demo' class='example3X'> //<--This is our canvas in the JS below
                Ia Cthulu.
                <div class='example3stuffhappens'>
                   #A bunch of HTML is in here.
               </div>
       </div>
    </div>
</label>

CSS (Doesn't really matter, but maybe helpful to see what the CSS is doing)

input.examplesection {
    display:none;
}

input.examplesection   label.examplesection  {
  /*Some stuff that shows the title and hides the rest of the contents.*/
}

input.examplesection:checked   label.examplesection {
    /*Some stuff that desplays the label contents and changes the background color... It's a collapsible section in pure CSS. */
}

JavaScript:

if(flags.includes('example3')){
    document.getElementById("example3demo").classList.remove("example3X");
    document.getElementById("example3demo").classList.add("example3Y");

    canvas = document.getElementById("example3stuffhappens");

    //Clear out the contents of canvas.
    canvas.innerHTML="";
   //Repopulate canvas with the new content
   x3cont = document.createElement("div"); 
   for( //loopconditions) {
        x3cont.appendChild(//lotsofstuff);
   }
   canvas.appendChild(x3cont);

}

That's what's happening. If the "flags" array contains "example3", the script triggers and changes the class of the "example3demo" element, then loops through a set of conditions, populates a div it made with a bunch of child elements, then pushes that div into

The problem is, that when this happens, the demo3 checkbox becomes unchecked, thus collapsing the demosection and hiding the result from the user. They can go click on the section and it will open back up and show them the expected change, but this terrible UX.

I had an idea that as part of the "if()" I could try to get the "example3" checkbox and set it's state to checked,which I imagine would cause the user to see the section collapse and then reexpand, showing the change. Better, but not perfect. I haven't tried to implement it yet. To add to the complexity of this solution the "example3" id is actually generated dynamically and if other contents on the page change it might become "example4" or "example2". That's out of my control unless I hack the PHP that's generating the HTML (which has it's own set of problems... like when the script updates).

Is there a better solution to pursue? Why is this happening at all? Is there a way I can just stop it from happening?