URL when clicking on category keys

Hello,

I am trying to implement the feature that the design of “qem-category” is changed when the user is already on the specific category URL the button links to.

This script is working fine:

<script type="text/javascript">
          document.addEventListener("DOMContentLoaded", function() {
  const currentUrl = window.location.href;
  document.querySelectorAll(".qem-category a").forEach(function(link) {
    if (currentUrl.includes(link.href)) {
      link.parentElement.classList.add("active");
    }
  });
});
        </script>

However the category buttons are only changing design (via CSS) after the second click. I see that the URLs, which are generated after the click, are wrong.

So I have two categorys: Cat1 and Cat2. When I click on Cat1 the URL is:

https://address.tld/events/?category=cat1

After clicking on the Cat2 button:

https://address.tld/events/?category=cat1&category=cat2

Something is wrong there and I think that’s why my script only works after the second click. Can you please assist me with that issue?

Thanks!