JSFiddle - React, Tailwind, and code Playground

HTML

<a id="link1" href="javascript:;">Click to show list</a>

<ul id="ul1"></ul>
<p id="p1"></p>

JavaScript

var foolist = ["foo1", "foo2", "foo3"];

function showText(i) {
    $('#p1').append(foolist[i]);
}

function makeTextCallback(i) {
    return function() {
        showText(i);
    };
}

$('#link1').click(function () {

	for (var i = 0; i < foolist.length; i++) {
		var li = document.createElement('li');
        li.innerHTML = "This is a link.";
        
        $('#ul1').append(li);

		$(li).hover(makeTextCallback.call(this, i));
	}
});