JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tbody class="detail">
                            <tr class="row">
                                <td><input type="text" class="no" value="1"></td>
                                <td><input type="text" class="pid"></td>
                                <td><input type="text" class="productname"></td>
                                <td><input type="text" class="price"></td>
                                <td><input type="text" class="quantity"></td>
                                <td><input type="text" class="amount"></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td><span class="total"></span></td>
                              
                            </tr>
                            
                        </tbody>
</table>

JavaScript

$('.detail').delegate('.quantity, .price, .discount', 'keyup', function(){
                var tr = $(this).parent().parent();
                var qty = tr.find('.quantity').val();
                var price = tr.find('.price').val();
                var amt = qty * price;
                tr.find('.amount').val(amt);
                total();
            });
            function total() {
                var t = 0;
                $('.amount').each(function(i,e) {
                    var amt = $(this).val();
                    t += amt;
                });
                $('.total').html(t);
            }