JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<ul>
    <li data-primarykey="0">
        Originally zero
        <button name="set" data-setvalue="23">Set to 23</button>
        <button name="set" data-setvalue="0">Set to zero</button>
        <button name="get">Get</button>
    </li>
    <li data-primarykey="16">
        Originally 16
        <button name="set" data-setvalue="23">Set to 23</button>
        <button name="set" data-setvalue="43">Set to 43</button>
        <button name="set" data-setvalue="0">Set to zero</button>
        <button name="get">Get</button>
    </li>
    <li data-primarykey="23">
        Originally 23
        <button name="set" data-setvalue="23">Set to 23</button>
        <button name="set" data-setvalue="43">Set to 43</button>
        <button name="set" data-setvalue="0">Set to zero</button>
        <button name="get">Get</button>
    </li>
</ul>

<div id="result"></div>
<button name="test">Test</button>

JavaScript

$('button[name=set]').on('click', function(event) {
    var button = $(event.target);
    var setvalue = button.data('setvalue');
    var row = button.closest('li');
    row.data('primarykey', setvalue);
    $('#result').empty().append($('<p/>').text('set to ' + setvalue));
});
$('button[name=get]').on('click', function(event) {
    var button = $(event.target);
    var row = button.closest('li');
    $('#result').empty().append($('<p/>').text('value is ' + row.data('primarykey')));
});
$('button[name=test]').on('click', function() {
    var msg = $('li[data-primarykey=23]').length + ' elements have 23';
    $('#result').empty().append($('<p/>').text(msg));
});