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