Javascript to sum value of hmtl table column

not very experienced with Javascript or MVC, but trying to get a total for 1 column from a HTML table.

Table looks like this:

    <table class="table" id="TblLine">
    <thead>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Period End Date
            </th>

            <th>
                Hours/Days
            </th>
            <th>
                Rate
            </th>
            <th>
                Total
            </th>
            <th>
                Rate Code
            </th>
            <th>
                Agency Reference
            </th>
            <th>

            </th>
        </tr>
    </thead>

    <tbody>
        <tr id="1">
            <td>

                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @id = "fn1" } })

            </td>
            <td>

                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @id = "ln1" } })

            </td>
            <td>

                @Html.EditorFor(model => model.PeriodEndDate, "{0:yyyy-MM-dd}", new { htmlAttributes = new { @id = "ped1" } })

            </td>
            <td>

                @Html.EditorFor(model => model.Units, new { htmlAttributes = new { @id = "un1" } })

            </td>
            <td>
                
                 @Html.EditorFor(model => model.Rate, new { htmlAttributes = new { @id = "rt1" } })
            </td>
            <td>

                @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @id = "amt1", @class = "tbamt" } })
                
            </td>
            <td>
                @Html.DropDownList("RateCode", new SelectList(ViewBag.RateCode, "ValueName", "DisplayName"), "Select a Rate Code", htmlAttributes: new { @class = "form-control", id = "RateCode1" })

            </td>
            <td>

                @Html.EditorFor(model => model.AgencyRef, new { htmlAttributes = new { @id = "ar1" } })

            </td>
            <td>
                <input type="button" value="Delete" onclick="deleteRow(this)"/>
            </td>
        </tr>
    </tbody>
</table>

There is an Add Row button on the page which calls the below javascript to add a row which works

    $(document).ready(function () {
    $("#AddRowBtn").click( function () {

        var tbl = document.getElementById("TblLine")
        var RateCodes ='@ViewBag.RateCodeJson';
        var RateCodeIteration = "";
        var rowstart = '<tr id=' + counter +">";
        var rowend = "</tr>";
        var firstname = "<td>" + '@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @id = "fn#" }})' + "</td>";
        firstname = firstname.replace("#", counter);
        var lastname = "<td>" + '@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @id = "ln#" } })' + "</td>";
        lastname = lastname.replace("#", counter);
        var date = "<td>" + ' @Html.EditorFor(model => model.PeriodEndDate, "{0:yyyy-MM-dd}", new { htmlAttributes = new { @id = "ped#" } })' + "</td>";
        date = date.replace('#', counter);
        var units = "<td>" + '@Html.EditorFor(model => model.Units, new { htmlAttributes = new { @id = "un#" } })' + "</td>";
        units = units.replace('#', counter);
        var rate = "<td>" + '@Html.EditorFor(model => model.Rate, new { htmlAttributes = new { @id = "rt#" } })' + "</td>";
        rate = rate.replace('#', counter);
        var amount = "<td>" + '@Html.EditorFor(model => model.Amount, new { htmlAttributes = new { id = "amt#", @class = "tbamt" } })' + "</td>";
        amount = amount.replace("#", counter);
        var agencyref = "<td>" + '@Html.EditorFor(model => model.AgencyRef, new { htmlAttributes = new { @id = "ar1" } })' + "</td>";
        agencyref = agencyref.replace('#', counter);
        var removerow = '<td> <input type="button" value="Delete" onclick="deleteRow(this)"/> </td >';

 /*       console.log(removerow);*/

        var ratecode = "<td>" + '<select class="form-control" id="RateCode' + counter + '" name="RateCode' + counter + '"><option value="">Select a Rate Code</option>' + "</td>";

        var tblrow = (rowstart + firstname + lastname + date + units + rate + amount + ratecode + agencyref + removerow +  rowend);
      


        $('#TblLine tbody').append(tblrow);

        $.ajax({
            type: 'POST',
            url: ApplicationRoot() + "/Remittance/RemittanceCreate/RateCodes",

            dataType: 'json',


            success: function (rc) {

                $.each(rc, function (i, rc) {

                    $('#RateCode' + counter).append('<option value="' + rc.ValueName + '">' + rc.DisplayName + '</option > ');

                });
                counter++;
            }
        });

    }
 );
});

What I need to be able to do next is sum up the values from the Total column. I've gone through several examples of code I found on Google but no luck so far with each time its returning a 0. Any ideas or pointers in the right direction would be appreciated.