jQuery product of dynamically created qty and rate and its grand total

Here is the code to get the product of each row of qty and rate and the final grand total.

SCRIPT TO GET THE PRODUCT OF DYNAMICALLY CREATED QTY & RATE AND ITS GRAND TOTAL

<script>
    $(document).ready(function() {
            // $(document).delegate("#dynamic_field .rate", "keyup", function() {
        
            $('#dynamic_field').on("keyup", ".rate", function() {

            var parent = $(this).parents('tr');
            var rate = $('.rate', parent);
            var qty = $('.qty', parent);



            var total = $('.total', parent);
            var product = parseFloat(qty.val()) * parseFloat(rate.val());

            total.text(product);
            getTotal();
        });
    });

    function getTotal(){
        var grand = 0;
        $('.total').each(function(){
            grand += parseFloat(this.innerHTML)
        });
        console.log(grand);
        $('.grand').text(grand);
    }
</script>

SCRIPT TO CREATE DYNAMICALLY INPUT FIELD

<script>
    // DYNAMICALLY ADDING INPUT ROW FORM FOR ORDER DETAILS
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            var option = $('#reference').val();
            var select_id = $('#select').val();


            if(option.length === 0 && !select_id>0){
                alert('First choose your supplier');
            }else{ // adding row as input field
                i++;
                $('#dynamic_field').append('' +
                    '<tr class="product-detail fieldGroup" id="row'+i+'">' +
                    '<td>' + '' +
                    '       <select id="output" name="product_supplier_id[]" class="form-control ">' +
                    // '<option style="zoom:1.5" value="">option haru</option>'+
                    option +
                    '       </select></td>' +

                    '<td>' + '<input type="number" name="qty[]" placeholder="Quantity" class="form-control  qty" /></td>' +
                    '<td>' + '<input type="number" name="rate[]" placeholder="Rate" class="rate form-control " /></td>' +
                    '<td style="font-weight: bold;font-size: 18px;text-align: center;color: #ff00e3;vertical-align: middle" class="total">Total: 0</td>' +
                    '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button>' +'</td>' +
                    '</tr>');
            }


        });
        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $('#row'+button_id+'').remove();
        });
        $('#submit').click(function(){
            $.ajax({
                url:"name.php",
                method:"POST",
                data:$('#add_name').serialize(),
                success:function(data)
                {
                    alert(data);
                    $('#add_name')[0].reset();
                }
            });
        });
    });
</script>

HTML

<table class="table table-bordered" id="dynamic_field">
    <tr class="product-detail">
        <td>
            <select class="form-control input-lg"  id="output" name="product_supplier_id[]">
                <option style="zoom:1.5" selected disabled="" value="">Products But First Select Supplier</option>
            </select>
        </td>

        <td>
            <input placeholder="Quantity of product"   class="form-control input-lg qty" type="number" value="" name="qty[]"/>
        </td>

        <td>
            <input placeholder="Rate per QTY" class="form-control input-lg rate" type="number" value="" name="rate[]"/>
        </td>

        <td style="font-weight: bold;font-size: 18px;text-align: center;color: #ff00e3;vertical-align: middle" class="total">Total: 0</td>


        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>

    </tr>

    <tr class="product-detail">
        <td>
            <select class="form-control input-lg"  id="output" name="product_supplier_id[]">
                <option style="zoom:1.5" selected disabled="" value="">Products But First Select Supplier</option>
            </select>
        </td>

        <td>
            <input placeholder="Quantity of product"   class="form-control input-lg qty" type="number" value="" name="qty[]"/>
        </td>

        <td>
            <input placeholder="Rate per QTY" class="form-control input-lg rate" type="number" value="" name="rate[]"/>
        </td>

        <td style="font-weight: bold;font-size: 18px;text-align: center;color: #ff00e3;vertical-align: middle" class="total">Total: 0</td>


        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>

    </tr>

</table>

    <h3 class="text-center grand" style="color: #900783">Grand Total:</h3>