JSFiddle - React, Tailwind, and code Playground

HTML

<div data-toggle class="foo">
Foo 
</div>
<div data-toggle class="bar">
Bar 
</div>
<div data-toggle class="baz">
Baz 
</div>

CSS

.foo.on-click {
  color: red;
}

.bar.on-click {
  color: green;
}

.baz.on-click {
  color: blue;
}


div {
  font-size: 30px;
  user-select: none;
  cursor: pointer;
}
div:hover {
  outline: 2px solid gray;
}

JavaScript

document.addEventListener('click', e => {
        let n = e.target;
        do if (n.getAttribute?.('data-toggle') !== undefined) n.classList.toggle('on-click');
        while (n = n.parentNode);
    });