JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<div id="calc">
    <span>Add new</span>
    <p>
        <input type="text" name="cantidad[]" />
        <input type="text" name="precio[]" />
        <input type="text" name="total[]" readonly="" />
    </p>
</div>

CSS

input{border:1px #ccc solid;}
input:last-child{border:none;text-align:right;}

JavaScript

$('#calc>span').click(function(){
    $(this).parent().append('<p><input type="text" name="cantidad[]" /> <input type="text" name="precio[]" /> <input type="text" name="total[]" readonly="" /></p>');
});

$('#calc').on('keyup','input',function(){
    var totalCost = 0; $(this).parent().find('input[name="cantidad[]"],input[name="precio[]"]').each(function(){
        if($(this).val()!=''){
            totalCost += parseInt($(this).val(),10);
        }
      });
    $(this).parent().find('input:last-child').val('$ '+totalCost);
});