JSFiddle - React, Tailwind, and code Playground

by mark47

HTML

<ul id="list">
    <li>
        <label><span>Milk</span> 
            <button class="check-span">Check</button>
        </label>
    </li>
    <li data-val="eggs">Eggs
        <button class="check-val">Check</button>
    </li>
    <li>
        <label>Bread</label>
        <button class="check-label">Check</button>
    </li>
</ul>

JavaScript

$(document).ready(function () {
    // Find the text within the previous span
    $(".check-span").on("click", function () {
        alert($(this).prev('span').text());
    });
    // Use data attribute
    $(".check-val").on("click", function () {
        alert($(this).parent().attr('data-val'));
    });
    // Move button outside of label
    $(".check-label").on("click", function () {
        alert($(this).prev('label').text());
    });
})