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;
    foos[i].addEventListener('click', function () {
        doFoo(fooId);
    });
}