JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul class="class1">
    <li> element1
    </li>
    <li> element2
    </li>
    <li> element3
    </li>
</ul></div>
<div>
<button id="genIdz">Generate idz</button>
    
<button id="rmIdz">Remove idz</button>
</div>

CSS

ul
{
    list-style:none;
}
div{
    margin:20px 20px;
}
ul li
{
    line-height:20px;
    padding:5px 10px;
    margin:5px 0px;
    width:250px;
    
}
.class1 li{
    background-color:#dddddd;
    color:#000000;
}
.class1 li:hover{
   background-color:#bbbbbb;
}
.liClass2{
    background-color:#000000 !important;
    color:#ffffff !important;
}

JavaScript

$("ul li").each(function(index, node){

      $(this).click(function(){                     
           alert("You clicked on li"+index);                
      });
    
 });

$("#genIdz").click(function(){
    
    $("ul li").each(function(index, node){                
        $(this).animate({color: "#333333"}, 500, function(){
            $(this).attr("id", "li"+index).append(($(this).children("span").length==0)?"<span>-----now my id is <b>li"+index+"</b></span>":"");
        });                     
    });
    
});

$("#rmIdz").click(function(){
    $("ul li").each(function(index, node){ 
        $(this).removeAttr("id").children("span").remove();
    });
});