Event trigger on a class change.js

<script>

// * Event trigger on class change
// Watch an element to see if a specific class is added
// If so, trigger event
// This function can be used on multiple targets

function onClassChange(element, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'class'
      ) {
        callback(mutation.target);
      }
    });
  });
  observer.observe(element, { attributes: true });
  return observer.disconnect;
}

var ChangeMe = document.querySelector('.ChangeMe');
var ChangeMe2 = document.querySelector('.ChangeMe2');

// Watch element to see if active
var itemToWatch = document.querySelector('.WatchMe');
onClassChange(itemToWatch, (node) => {
  node.classList.contains('active')
    ? ChangeMe.classList.add('active')
    : ChangeMe.classList.remove('active');
});

// Watch 2nd element
var itemToWatch2 = document.querySelector('.WatchMe2');
onClassChange(itemToWatch2, (node) => {
  node.classList.contains('active')
    ? ChangeMe2.classList.add('active')
    : ChangeMe2.classList.remove('active');
});

</script>