JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Try to click on list items below:</h3>
<hr />
<ul id="dynamic-list">
    <li class="list-item">First item</li>
    <li class="list-item">Second item</li>
</ul>

CSS

h3 {
    font-size: 120%;
    font-weight: bold;
}
.list-item {
    cursor: pointer;
    margin: 5px;
}
.red {
    color: #ff0000;
}

JavaScript

$(document).on('click', '.list-item', function() {
    $(this).toggleClass('red');
});

var names = ['Third', 'Fourth', 'Fifth'];

// Appending new elements after event handler defenition:
$.each(names, function(i, name) {
    var li$ = $('<li>').addClass('list-item').html(name + ' item (created dynamically)');
    $('#dynamic-list').append(li$);
});