JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th>Weighting Boxes</th>
        <th>Spinners</th>
    </tr>
    <tr>
        <td>x</td>
        <td>
            <input type="text" id="x" value="1" />
        </td>
    </tr>
    <tr>
        <td>y</td>
        <td>
            <input type="text" id="y" value="1" />
        </td>
    </tr>
    <tr>
        <td>z</td>
        <td>
            <input id="z" value="1" />
        </td>
    </tr>
</table>

CSS

table th, td {
    border: 1px solid black;
}
table td {
    padding: 10px;
}

JavaScript

$(document).ready(function () {

    $('#x, #y, #z').spinner({
        min: 0
    });
});