JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="bad">
    <li>click me</li>
    <li>click me</li>
    <li>click me</li>
    <li>click me</li>
</ul>

<ul class="good">
    <li>click me</li>
    <li>click me</li>
    <li>click me</li>
    <li>click me</li>
</ul>

JavaScript

jQuery(function ($) {
    var bad_list_items = $('ul.bad li'),
        good_list_items = $('ul.good li'),
        i;
    
    for (i = 0; i < bad_list_items.length; i++) {
        $(bad_list_items[i]).on('click', function () {
            alert('list item ' + i + ' was clicked');
        });
    }
   
    for (i = 0; i < good_list_items.length; i++) {
        (function (index) {
            $(good_list_items[index]).on('click', function () {
                alert('list item ' + index + ' was clicked');
            });
        }(i));
    }
});