JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A" class="foo">Foo A</div>
<div id="B" class="foo">Foo B</div>
<div id="console"></div>

CSS

div{
    border: 1px solid blue;
    margin: 5px;
    padding: 5px;
}

JavaScript

function doFoo(id) {
    document.getElementById("console").innerHTML += "<li>You clicked Foo " + id + "</li>";
}

var foos = document.getElementsByClassName("foo");
for (i = 0; i < foos.length; i++) {
    var fooId = foos[i].id;
    var f = function (fooId) {
        return function (){doFoo(fooId)};
    }(foos[i].id);
    foos[i].addEventListener('click', f);
}