JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li name="test">My element 1</li>
  <li name="test">My element 2</li>
  <li name="test">My element 3</li>
</ul>

JavaScript

var mylist = document.getElementsByName('test');
for (let i = 0; i < mylist.length; i++) {
  mylist[i].addEventListener('click', function() {
    alert(i);
  });
}

addBefore(mylist[0], 'hello world')
addBefore(mylist[0], 'foo bar')
addBefore(mylist[1], 'hakuna matata!')


function addBefore(target, text) {
  let newLi = document.createElement('li')
  newLi.name = 'test' // WTF???
	newLi.innerHTML = text
  target.parentNode.insertBefore(newLi, target)
}