JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<ul id="ul">
  <li><a data-categoryid="1">one</a></li>
  <li><a data-categoryid="2">two</a></li>
  <li><a data-categoryid="3">three</a>

    <ul>
      <li><a data-categoryid="31">three - 1</a></li>
      <li><a data-categoryid="32">three - 2</a></li>
      <li><a data-categoryid="33">three - 3</a></li>
    </ul>
  </li>
  <li><a data-categoryid="4">four</a></li>
  <li><a data-categoryid="5">five</a></li>
</ul>

CSS

.selected {
  background-color: green;
  color: #ffffff;
  font-weight: bold;
}

JavaScript

function foo(event) {
  console.warn(event.target.id);
  event.target.classList.add("selected");
}


document.getElementById("ul").addEventListener("click", function(event) {
  if (event.target && event.target.nodeName == "A") {
    foo(event);
  }
});