JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>Stok</th>
            <th>Qty</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Kelinci>
            </td>
            <td>
                <input type=text name=stok class=stok value=4>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Kelinci>
            </td>
            <td>
                <input type=text name=stok class=stok value=4>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Kelinci>
            </td>
            <td>
                <input type=text name=stok class=stok value=4>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Ayam>
            </td>
            <td>
                <input type=text name=stok class=stok value=5>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Ayam>
            </td>
            <td>
                <input type=text name=stok class=stok value=5>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).on('input', '.qty', function () {
    var el = $(this);
    var root = el.closest('tr');
    var currentName = root.find('.nama').val();
    var stok=root.find('.stok').val();
    var rows = el.closest('tbody').children().filter(function () {
        return $(this).find('.nama').val() == currentName
    })
    var currentQty = el.val();
    var totalQuantity = rows.map(function () {
        return $(this).find(".qty").val()
    }).get().reduce(function (a, b) {
        return +(a) + +(b);
    });
    console.log(totalQuantity,stok)
    if (totalQuantity > stok) {
        alert("Error: QTY untuk barang " + currentName + " Terlalu banyak, Stok tersedia " + currentQty)
    }
})