I'm having some troubles getting my form to work properly. Here is the section of form with the issue:

I want each row to show kms*mileage rate for that row. I have tried the following two options without the right results:

Option 1: use the built in formula option

In this case, for the "Amount" field of the table, I went into the advanced setting of the variable and added in the formula:

=PRODUCT(metrage.kms,metrage.mileageratemetrage)

This worked for the first row but each row added a) shows the table total instead of the row total and 2) seems to multiply the new amount with the last, thereby exponentially growing the total amount:

Option 2: use javascript to calculate

I inserted the following Javascript (based on the solution from this LF Answer):

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var metragekm = 0;
        var mileagerate = 0;
        var total = 0;
        var subtotal = 0;
 
        $('.cf-table-block tbody tr').each(function () {
            metragekm =  parseNumber($(this).find('.metragekm input').val()); 
            mileagerate = parseNumber($(this).find('.mileagerate input').val());
            
            subtotal = (metragekm * mileagerate);
 
            $(this).find('.total input').val(subtotal);
            total += subtotal;
        });
        $('.metragetotal input').val(total);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

This was an improvement, because I can show a total at the bottom but it still isn't calculating anything for the rows:

I know that this is possible because I saw the person in this LF Answers with a table that worked.

A couple more concerns:

The form subtotal doesn't seem to update consistently:

Looks like that is dealt with in this LF answer but I'm no sure how to apply it...

Hoping someone can help!