JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<table>
    <thead>
        <tr>
            <th>Kode</th>
            <th>Serial Number</th>
            <th>Stok</th>
            <th>Qty</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Laptop>
            </td>
            <td>
                <input type=text name=sn class=sn value=1>
            </td>
            <td>
                <input type=text name=stok class=stok value=2>
            </td>
            <td>
                <input type=text name=qty class=qty value=1>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Laptop>
            </td>
            <td>
                <input type=text name=sn class=sn>
            </td>
            <td>
                <input type=text name=stok class=stok value=2>
            </td>
            <td>
                <input type=text name=qty class=qty value=1>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Laptop>
            </td>
            <td>
                <input type=text name=sn class=sn>
            </td>
            <td>
                <input type=text name=stok class=stok value=2>
            </td>
            <td>
                <input type=text name=qty class=qty value=0>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Mobile>
            </td>
            <td>
                <input type=text name=sn class=sn>
            </td>
            <td>
                <input type=text name=stok class=stok value=1>
            </td>
            <td>
                <input type=text name=qty class=qty value=3>
            </td>
        </tr>
        <tr>
            <td>
                <input type=text name=nama class=nama value=Mobile>
            </td>
            <td>
                <input type=text...

JavaScript

$(function () {
    $(document).on('keyup', '.qty,.sn', function () {
        var el = $(this);
        var root = el.parents('tr');
        var currentName = root.find('.nama').val();
        var currentStock = root.find('.stok').val();
        var totalCurrentQty = 0;
        $(".nama").each(function () {
            var currentScanName = $(this);
            var currentScanRoot = currentScanName.parents('tr');
            var currentScanNameValue = currentScanName.val();
            if (currentScanNameValue == currentName) {
                var tmpQtyValue = currentScanRoot.find('.qty').val();
                totalCurrentQty = totalCurrentQty + parseInt(tmpQtyValue);
            }
        })
        console.log(this,totalCurrentQty , currentStock)
        if (totalCurrentQty > currentStock) {
            alert("Error: Stok for kode  " + currentName + " To much, Stock Avaiable " + currentStock)
        }
    })
})

$(document).on('keyup change blur', '.sn', function () {
    var imae = $(this).val();
    if (imae != '') {
        $(this).parents('tr:first').find(".qty").val(1);
    } else {
        $(this).parents('tr:first').find(".qty").val("");
    }
})