Interaction for global class doesn't work after adding a subclass with JS

Design help Animations & Interactions
1

I want to reuse interaction for class .tech-1 .tech-2, where I add them as a subclass to a CMS item depending on the CMS item technology. I managed to do this and in the console it looks the good, but interaction does not work. Do you have a clue what can be a reason? Is there any workaround for a solution like this?

 <script>
        $(function () {
           

          $("div.dclass").each(function(index, element) {
          var myclass = $(this).text(); // .dclass value (the cms option selected)
          var mytarget = $(this).parent(); // .post-wrapper
          switch (myclass) {

            case "1":
              // add a css class to .post-wrapper
              // where .featured or .post-wrapper.featured  class exists
              mytarget.addClass("tech-1");

              break;
                        case "2":
              // add a css class to .post-wrapper
              // where .featured or .post-wrapper.featured  class exists
              mytarget.addClass("tech-2");

              break;
                        case "3":
              // add a css class to .post-wrapper
              // where .featured or .post-wrapper.featured  class exists
              mytarget.addClass("tech-3");

              break;
                        case "4":
              // add a css class to .post-wrapper
              // where .featured or .post-wrapper.featured  class exists
              mytarget.addClass("tech-4");

              break;

            default:
              break;
          }
        });
      });
    </script>

image
image822×506 137 KB

Here is my public share link: Webflow - Safer

2

The IX engine is probably unaware that your elements have that class because your JS comes after the page load.

Others have issues too and are trying to reset the ix engine using JS, see here Reinitialize Webflow IX2 - #44 by sebastianjung