JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Boo</li>
    <li>Far</li>
    <li>Soup</li>
    <li>Nuts</li>
    <li>Stew</li>
    <li>Legume</li>
</ul>
<label id="lastclicked">NOT</label>

CSS

li {
    height: 60px;
}
li:nth-child(2n) {
    background-color: #ddd;
}
.marker {
    width:4px;
    height:4px;
    position:absolute;
    background-color:black;
    pointer-events:none;
}

JavaScript

// Here is some code to tell us which element has been clicked
$('ul').on('click','li', function (evt) {
    // Write the name of the last clicked to a label
    $("#lastclicked").text($(this).text());
    
    // We add a marker as well
    var x = document.createElement("div");
    x.classList.add("marker");
    x.style.left = evt.pageX + "px";
    x.style.top = evt.pageY + "px";
    document.body.appendChild(x);
});

function simulateClick(x, y) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, x, y, false, false, false, false, 0, null);
    document.elementFromPoint(x, y).dispatchEvent(clickEvent);
}
simulateClick(70, 30);
simulateClick(110, 90);
simulateClick(130, 150);
simulateClick(20, 210);
simulateClick(100, 270);