JSFiddle - React, Tailwind, and code Playground

HTML

<ul></ul>

<button>Add list elements</button>

CSS

ul {
    list-style: none;
    padding: 0;
}
li {
    border: 1px dotted;
    margin: 10px;
}
li:hover {
    color: #00f;
}

JavaScript

$('button').on('click', function() {
    for (var i = 0; i < 7; i++) {
        $('<li />').text('Item ' + i).appendTo('ul');
    }
});

$('ul').on({
    mouseenter: function() {
        console.warn('dansl\'body');
        //stuff to do on mouse enter
    },
    mouseleave: function() {
        console.warn('sorti');
        //stuff to do on mouse leave
    }
}, 'li');