How to get price total of dynamically created rows?

I want to SUM the price of all dynamically created rows and display into total input field..I have tried some things but not working for me.I have posted my script and image that explains how it should works. Everything is working and saving in database just want total amount of all items. Please see image for clear concept.

Image: It should work like this

Html:

   <div class="form-group">
     <label>Total</label>
      <input readonly type="text" id="total_amount" class="form-control"
       name="total_amount">
    </div>

Script:

 <script>
    var counterr = 1;
    $(document).ready(function () {

        $('#unit_price,#item_quantity').change(function () {
            // alert();
            var unitPrice = $('#unit_price').val();
            // console.log(unitPrice);
            var quantity = $('#item_quantity').val();
            // console.log(quantity);

            var total = (unitPrice * quantity).toFixed(0);

            $('#total_price').val(total);
        });


        // Input Fields


        var maxField = 100; //Input fields increment limitation
        var addButton = $('#add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper

        $(addButton).click(function (e) {
            e.preventDefault();
            counterr++;
            //Check maximum number of input fields
            if (counterr < maxField) {
                fieldHTML = makeNewRow(counterr);
                $(wrapper).append(fieldHTML); //Add field html
                // $('#department-'+counterr).select2();

                // console.log("Unit price", counterr);
                $('.unit_price' + counterr).change(function () {
                    // console.log("hello");
                    var unitPrice = $('.unit_price' + counterr).val();
                    // console.log(unitPrice);
                    var quantity = $('#item_quantity' + counterr).val();
                    // console.log(quantity);

                    var total = (unitPrice * quantity).toFixed(0);

                    $('#total_price' + counterr).val(total);


                });


            }

        });


        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function (e) {
            e.preventDefault();
            $(this).parent('#newrow').remove(); //Remove field html
            counterr = counterr--; //Decrement field counter
        })


    });

    function makeNewRow(counterr) {

        return '<div class="row" id="newrow">' +
            '<div class="col-md-4">' +
            '<div class="form-group">' +
            '<select onChange="getPurchasePrice(this.value);" style="background-color: #f5f6f9" id="item_name' + counterr + '" class="form-control dep"' +
            'placeholder="Enter Item" name="testing[]"' + '>' +
            '<option value = "">Select Item</option>' + '>' +
            '@foreach($items as $item)' + '>' +
            '<option value = ""></option>' + '>' +
            '@endforeach' + '>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input style="background-color: #f5f6f9" type="number" id="item_quantity' + counterr + '" class="form-control"' +
            'placeholder="Enter.." name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input style="background-color: #f5f6f9" type="number" id="unit_price' + counterr + '" class="unit_price' + counterr + ' form-control"' +
            'placeholder="Enter.." name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input value="0" style="background-color: #f5f6f9" disabled type="text" id="total_price' + counterr + '" class="form-control"' +
            'placeholder="Total" name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<a style="height:40px;margin-left:25px" href="javascript:void(0);" class="btn btn-danger remove_button">X</a>' +
            '</div>'; //New input field html
    }

    /*function removeDiv(no){
        $("#testingrow-"+no).remove();
        x--;
    }*/


</script>

via Chebli Mohamed