JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<script src="https://raw.github.com/plentz/jquery-maskmoney/master/jquery.maskMoney.js"></script>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table border="1">	  
          <tr> 
             <th>Quantidade</th> 
             <th>Vlr Unitario S/ICMS</th>   
             <th>Total</th> 
           </tr>
           <tr>
           
            <td><input type='text' name='quantidade[]' class='quantidade' id='quantidade0'></td>
			<td><input type='text' name='valitemunitario[]' class='valoritem' id='valitemunitario0' size='5'></td>
             <td><input type='text'  name='valortotal[]' class='valortotal' id='valortotal0' disabled='disabled'></td>
           </tr>
           <tr>
           
            <td><input type='text' name='quantidade[]' class='quantidade' id='quantidade1'></td>
			<td><input type='text' name='valitemunitario[]' class='valoritem' id='valitemunitario1' size='5'></td>
             <td><input type='text'  name='valortotal[]' class='valortotal' id='valortotal1' disabled='disabled'></td>
           </tr>
    <tr>
      <td></td>
      <td></td>
      <td><b>SOMA TOTAL:<input type='text' disabled='disabled' name='total' class='totais' id='total'></b></td>
    </tr>
   </table>

JavaScript

$(document).ready(function() {
  $("input[name='quantidade[]'], input[name='valitemunitario[]']").on('change', function(){
  var tr = $(this).parent().parent();
    var quantidade = parseInt($(tr).find('.quantidade').val(), 10) || 0;
    var valItem = parseInt($(tr).find('.valoritem').val(), 10) || 0;
    console.log(quantidade);
    console.log(valItem);
    var total = quantidade*valItem;
    $(tr).find('.valortotal').val(total.toFixed(2));
  
    var somaTotal = 0;
    $(".valortotal").each(function(k, v){
      somaTotal += parseFloat($(this).val(), 10) || 0;
    });
    
    $("#total").val(somaTotal.toFixed(2));
  });
});