I have a mutation observer set up - it's meant to track changes in the amount of elements added to a div "box" on the page, and if there are too many visible elements added (more than 6), it's supposed to add page navigation buttons which would allow to switch between page 2 (elements beyond the 6th one) and back to page one (which shows first 6 elements).

To achieve this, I've set up a "storage" object outside of the mutation observer to keep track of updating elements.

const storedNodes = {
   nodesToStay: {},
   nodesToMove: {}
};

I also track which page we're currently viewing and initialize the relevant variables outside of the mutation observer, as without that they seemed to get unintentionally overwritten when any updates were happening.

let currentPage = 1;
let idOfStayingElements;
let idOfMovedElements;   
let allElements;
                        
    
const optionCountObserver = new MutationObserver(() => {
      allElements = Array.from(textField.querySelectorAll(":scope > div:not(.gone)"));
    
      if (currentPage === 1) {
         const elementsToStay = allElements.slice(0, Math.min(6, allElements.length));
         idOfStayingElements = elementsToStay.map(node => node.id);
    
         if (elementsToStay.length > 0) {
             for (let i = 0; i < Math.min(6, elementsToStay.length); i++) {                                          
               storedNodes["nodesToStay"][elementsToStay[i].id] = elementsToStay[i];
             }
          }
 }

Only when there are more than 6 elements on page, I start to set up logic for creating logic for what elements we should move to the next page:

 if (allElements.length > 6){
  const elementsToMove = allElements.slice(6);
  idOfMovedElements = elementsToMove.map(node => node.id);
    
     for (let i = 0; i < elementsToMove.length; i++) {
          const elementId = elementsToMove[i].id;
          storedNodes["nodesToMove"][elementId] = elementsToMove[i];                                  
          document.getElementById(elementId)?.remove();
    
          delete storedNodes["nodesToStay"][elementId];
          idOfStayingElements = idOfStayingElements.filter(id => id !== elementId);
           }
}

This is logic for actually showing navigation and switching between pages:

if (Object.keys(storedNodes["nodesToMove"]).length >= 1) {

    if (!gameState["pageNavigationOn"]) {
         pageNavigation.classList.remove("gone");
         gameState["pageNavigationOn"] = true;
        
    if (!pageNavigation.contains(pageOne)) {
        createPageNavigation(pageOne, "Page 1");
        pageOne.classList.add("invisible");
    }
    if (!pageNavigation.contains(pageTwo)) {
        createPageNavigation(pageTwo, "Page 2");
    }                                    
                                    
    pageOne.addEventListener("click", function(){
            currentPage = 1;
            buttonConfirm.play();
                                        
            textField.replaceChildren();                           
            pageOne.classList.add("invisible");                          
            pageTwo.classList.remove("invisible");
    
            for (let id of idOfStayingElements) {
                  if (storedNodes["nodesToStay"][id]) {
                 textField.appendChild(storedNodes["nodesToStay"][id]);
                   }
               }     
                                       
    })
                                    
    pageTwo.addEventListener("click", function(){
           currentPage = 2;
           buttonConfirm.play();                           
           textField.replaceChildren();                            
           pageOne.classList.remove("invisible");
           pageTwo.classList.add("invisible");
        
           for (let id of idOfMovedElements) {
               if (storedNodes["nodesToMove"][id]) {
              textField.appendChild(storedNodes["nodesToMove"][id]);
                }
           } 
     })
  }
                
}
});

Invisible class sets opacity to 0 and visibility to hidden, gone class sets display to none.

I rewrote some code - previously, switching between pages wasn't working correctly as I was constantly overwriting elementsToStay even when it wasn't supposed to update (for example, when we were viewing the second page).

Because of that, I've added logic that first checks if we're on the first page, and only updates "staying" elements then.

But at the moment, this is still not working as expected. For some reason, if we switch to page two and then back to page 1 - first of 6 elements that SHOULD show up on this page gets erased, so we end up with just 5 elements here. Page navigation still remains functional, but I just don't see why this happens - this is the biggest issue at the moment.

Also, it seems that node IDs don't get assigned to elements quite correctly if we try to switch between pages like this - they still function as expected, so this also baffles me. This may be happening because normally the textField would also contain hidden elements with "gone" class, and this mutationObserver only targets elements without the gone class?

Here's the code in bigger scheme of things: .js#L1477

And here's the live version of this site, still WIP - the problematic behavior can be seen in ACT menu: /