JSFiddle - React, Tailwind, and code Playground

by Alfie

HTML

<li id="li-tip-line">
    <table>
        <tbody>
            <tr>
                <td>
                    <label for="lblTipLine" data-petkey="dog">Dog Tip Line Amount :</label>
                </td>
                <td>
                    <input type="text" name="tip-line-amount" class="tip-line-amount" value="0.00" class="cls-tip-line-amount">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="lblTipLine" data-petkey="bruiser">Bruiser Tip Line Amount :</label>
                </td>
                <td>
                    <input type="text" name="tip-line-amount" class="tip-line-amount" value="0.00" class="cls-tip-line-amount">
                </td>
                <td>
                    <button>click</button>
                </td>
            </tr>
        </tbody>
    </table>
</li>

JavaScript

$('button').click(function () {
    var data = {};
    $(this).closest('table').find('[data-petkey]').each(function () {
        data[$(this).data('petkey')] = $(this).closest('tr').find('.tip-line-amount').val();
    });
    console.log(data);
});