JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li id="name-88">Old Item</li>
<li id="name-59">Old Item</li>
<li id="name-48">Old Item</li>
</ul>
<button id="add">Add Item</button>
CSS
ul>li {
position: relative;
padding: 1rem;
border: 1px solid #ddd;
}
ul>li:hover {
cursor: pointer;
background: #ddd;
}
JavaScript
$(document).ready(function() {
$('ul>li').on('click', function() {
var idName = $(this).attr('id');
alert(idName);
});
$('#add').click(function() {
var n = Math.floor((Math.random() * 100) + 1);
$('ul').prepend('<li id="name-' + n + '">New Item</li>');
});
});