Isotope | button state management with URL hash

[anthonysalamin]

Hello

I successfully rewrote à la Vanilla JavaScript a small snipet that manage the checked state of the buttons for my Isotope filtering system. The problem is, it only works when the user first clicks on the first group (A) then on the second group (B). If the user does so, the checked state works well. If the user however first clicks a filter in group (B), then in group (A)… the button state doesn’t work anymore (isotope does work though)

Here my simplified codepen
Here the video recording of the problem
Here the debug view

Any help would be highly appreciated
I logged a lot of variable in the console, for you to understand what is going on.
I think I’m really close but still missing something…

Below the button state management snipet:

// 🧠 button state management
  let log = console.log;
  let urlFilter = decodeURIComponent(hashFilter);
  // if URL has filter set
  if (urlFilter) {
    log(`URL hash: ${urlFilter}`);
    let splitted_URL_filter = urlFilter.split(".");
    splitted_URL_filter.shift(); // remove first empty item
    log(splitted_URL_filter);

    // for every button groups
    let buttonGroups = document.querySelectorAll(".button-group");
    for (let i = 0; i < buttonGroups.length; i++) {
      let buttonGroup = buttonGroups[i];

      // for every filters
      let buttonFilters = buttonGroup.querySelectorAll(".button");
      for (let j = 0; j < buttonFilters.length; j++) {
        let buttonFilter = buttonFilters[j];
        let filterTag = buttonFilter.getAttribute("data-filter");
        log(filterTag);

        // if a URL filter exist and matches a group filter
        if (filterTag.includes(splitted_URL_filter[i])) {
          log(
            `🥑 URL filter "${splitted_URL_filter[i]}" matched in group ${i} for ${filterTag}`
          );
          // for each button group remove checked class
          buttonGroups[i]
            .querySelector(".is-checked")
            .classList.remove("is-checked");
          // for each button group add checked class on matched filter
          buttonGroups[i]
            .querySelector(`[data-filter=".${splitted_URL_filter[i]}"]`)
            .classList.add("is-checked");
        } else {
          log(`🍓 There is no URL match for "${filterTag}"`);
        } // end if URL match
      } // end for every filters
    } // end for every button groups
  } // end if URL exists