JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<table>
<tr>
<td><input type="text" name="qty3rd" value="" class="qtys" size="1"/></td>
<td><input type="text" name="qty4th" value="" class="qtys" size="1"/></td>
<td><input type="text" name="product_qty" value="" class="qty_total" size="1"/></td>
<td><button class="add_to_cart" style="font-size:9px;">Add</button></td>
</tr>
<tr>
<td><input type="text" name="qty3rd" value="" class="qtys" size="1"/></td>
<td><input type="text" name="qty4th" value="" class="qtys" size="1"/></td>
<td><input type="text" name="product_qty" value="" class="qty_total" size="1"/></td>
<td><button class="add_to_cart" style="font-size:9px;">Add</button></td>
</tr>
</table>

CSS

input {
    font-size:10px;
}
.qty_total {
    background: red;
}

JavaScript

$('.qtys').blur(function () {
    var sum = 0;
    $(this).closest('tr').find('.qtys').each(function () {
        sum += Number($(this).val());
    });
    $(this).closest('tr').find('.qty_total').val(sum);
    
    $('.qty_total').each(function() {
	if ($(this).val() != "") {
    $(this).closest('tr').find('.add_to_cart').prop("disabled",false);
    } else {
    $(this).closest('tr').find('.add_to_cart').prop("disabled",true);
    }
});
});