JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="work">
    <li>Work 1</li>
    <li>Work 2</li>
    <li>Work 3</li>
    <div>
      <p>
      Hello
      </p>
    </div>
</ul>
<div>And</div>
<ul id="work2">
    <li>Work 3</li>
    <li>Work 4</li>
    <li>Work 5</li>
</ul>

CSS

li {
    display:block;
}
.active {
    background-color: #00ff00;
}

JavaScript

<!-- var lists = document.querySelectorAll('#work');
for (var i = 0; i < lists.length; i++) {
  var children = lists[i].addEventListener('click', function (evt) {
     //evt.target.classList.add("active");
     //event.target.classList.add("active");
     alert('hello');
    }, false);
  } -->


var list = document.querySelectorAll('#work');    

function test() {
list[i].addEventListener('click', function ($evt) {
     //evt.target.classList.add("active");
     //event.target.classList.add("active");
     alert('hello');
    });
}

    
    
    for (var i = 0; i < list.length; i++) {
    	test();
    }