JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li id="item-1">First</li>
    <li id="item-2">Second</li>
    <li id="item-3">Third</li>
</ul>

CSS

.red {
    color: #cc3333;
}

JavaScript

$(document).ready(function () {
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();
        
        if (indexItem == 0) {
            displayId(e);
        }
        if (indexItem == 1) {
            displayNode(e);
        }
        if (indexItem == 2) {
            displayNodevalue(e);
        }
    });
})

function displayId(e) {
    var $listID = e.target.id;
    alert($listID);
}

function displayNode(e) {
    var listNodename = e.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(e) {
    var listValue = e.target.nodeValue;
    alert(listValue);
}