JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<ul id="categories">
    <li>
        <span>Apples</span>
    </li>
    <li>
        <span>Oranges</span>
    </li>
    <li>
        <span>Bananas</span>
    </li>
</ul>

CSS

body {
    font-family: sans-serif;
}
li {
    width: 300px;
    border: 1px dotted black;
    margin: 5px;
    padding: 5px;
}

li div {
    display: inline;
}

JavaScript

$('#categories li').each(function() {

    initializeCategories($(this));
});

function initializeCategories(category) {

    obj = {
        titleSpan: category.children('span'),
        title: category.children('span').text(),
        alertTitle: function(str) {
            alert(str + ': ' + this.title);
        }
    };

    category.data('obj', obj);
}

$('#categories li').on('mousedown', function() {
    $(this).data('obj').alertTitle('Foo');
});