JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<div class="result">total <span id="grand-total"></span></div>
<div class="contenedor">
    <div class="fieldprod">
        <div>
            <input type="text" placeholder="Product"></input>
        </div>
        <div class="csymbol" data-symbol="$">
            <input class="price" type="text" placeholder=" 0.00"></input>
        </div>
        <div>
            <input class="quantity" type="text" placeholder="qty"></input>
        </div>
        <div class="csymbol" data-symbol="$">
            <p class="product-total">0.00</p>
        </div>
        <div id="e">+</div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    var max_fields = 10;
    var moreprod = $(".contenedor");
    var add_button = $("#e");
    var grandTotal = $('#grand-total');

    var x = 1;
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++; //text box increment
            $(moreprod).append('<div class="fieldprod"><div><input type="text" placeholder="Product"></input></div><div class="csymbol" data-symbol="$"><input class="price" type="text" placeholder=" 0.00"></input></div><div><input class="quantity" type="text" placeholder="qty"></input></div><div class="csymbol" data-symbol="$"><p class="product-total">0.00</p></div><div class="removebtn">-</div></div>'); //add input box
        }
    });


    moreprod.on("click", ".removebtn", function (e) {
        e.preventDefault();
        $(this).closest('.fieldprod').remove();
        x--;
        moreprod.find('.price').first().trigger('change');
    }).on('change', '.price, .quantity', function(){
        var group = $(this).closest('.fieldprod'),
            quantity = +group.find('.quantity').val(),
            price = +group.find('.price').val(),
            total = group.find('.product-total');
        
        total.text( (quantity*price).toFixed(2) );
        
        var grand = moreprod
                        .find('.product-total').get()
                        .reduce(function(p,v){
                            return p + +$(v).text();
                        },0);
        grandTotal.text(grand.toFixed(2));
        
    });

});