JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="suma">
<div>
<label>Cant.</label>
<input type="text" name="cant[0]" data-id="0">
<label>Precio Unitario</label>
<input type="text" name="price[0]" data-id="0">
<label>Monto</label>
<input type="text" name="amount[0]" data-id="0" disabled>
</div>
<div>
<label>Cant.</label>
<input type="text" name="cant[1]" data-id="1">
*
<label>Precio</label>
<input type="text" name="price[1]" data-id="1">
=
<label>Total</label>
<input type="text" name="amount[1]" data-id="1" disabled>
</div>
<div>
<label>Cant.</label>
<input type="text" name="cant[2]" data-id="2">
*
<label>Precio</label>
<input type="text" name="price[2]" data-id="2">
=
<label>Total</label>
<input type="text" name="amount[2]" data-id="2" disabled>
</div>
<div>
<label>SUBTOTAL:</label>
<input type="text" name="subtotal" id="subtotal" disabled>
</div>
<div>
<label>IVA 10%</label>
<input type="checkbox" name="iva" data-iva="10">
<input type="text" name="ivaAmount" id="iva" disabled>
</div>
<div>
<label>TOTAL:</label>
<input type="text" name="total" id="total" disabled>
</div>
</div>
JavaScript
$(document).ready(function(){
$('#iva').hide();
$('#suma input').blur(function(){
var id = $(this).data('id');
costs(id);
});
});
function costs(id){
var cant = $('input[name="cant['+id+']"]').val();
var price = $('input[name="price['+id+']"]').val();
var cost = cant * price;
$('input[name="amount['+id+']"]').val(cost);
theTotal();
}
function theTotal(){
var subtotal = 0;
var ivaChecked = $('input[name=iva]').is(':checked');
var iva = $('input[name=iva]').data('iva');
$('input[name^=amount]').each(function(){
subtotal += Number($(this).val());
});
$('#subtotal').val(subtotal);
if(ivaChecked){
iva = subtotal * (iva/100);
subtotal = subtotal + iva;
$('#iva').val(iva).show();
}
$('#total').val(subtotal);
}