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().each(function(i){
        $(this).click(function(){
            var indexItem = i; 
            
            if(indexItem == 0){
                 displayId();                                  
            }
            if(indexItem == 1){
                displayNode();
            }
            if(indexItem == 2){
                displayNodevalue();
            }
       });
    });
})
function displayId(event){
   // below returns undefined not what I want
   // var $listID = jQuery(this).attr("id"); 
   var $listID = event.target.id;
    alert($listID);
}
    
function displayNode(event){
    var listNodename = event.target.nodeName;
    alert(listNodename);
}
    
function displayNodevalue(event){
    var listValue = event.target.nodeValue;
    alert(listValue);
}