How to do calculation where a value has to be entered in a row for each row of table using Razor Pages and JavaScript?

Question

I have a table for product data and the user can enter the amount of a product to buy in each row. I would like to compute the total price per product in each row and then the total price of the whole purchase below the table.

This is my table:

<table id="productTable">
<thead>
    <tr>
        <th>Amount</th>
        <th>
            @Html.DisplayNameFor(model => model.Products[0].Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products[0].Price)
        </th>
        <th>Total</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.Products)
    {
        <tr>
            <td>
                <input type="number" id="quantityInput" onchange="calcSubTotal()" min="0" value="0" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td id="priceLabel">
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td id="labelSubTotal"></td>
        </tr>
    }
</tbody>

The items are coming from the model (IList). I want to multiply the entered value of the input (type number) and the price of the corressponding row using JavaScript.

In JavaScript I am using getElementById to access the UI-Elements. How I can access the row of the table where the focus of the HTML-Input is?

My JavaScript:

<script type="text/javascript">
    function calcSubTotal() {
        var numberInput = document.getElementById('quantityInput');
        var val = numberInput.value;
        var amount = parseFloat(val);
        var priceLabel = document.getElementById('priceLabel');
        var priceValue = priceLabel.innerText;
        var price = parseFloat(priceValue);
        var totalPrice = amount * price;
        var subTotalLabel = document.getElementById('labelSubTotal');
        subTotalLabel.innerText = totalPrice.toString();
    }
</script>

Answer 1

It may work if only have one record.But you have several raws of record.Each id of Price and Total are the same.You need to distinguish the id like below:

<table id="productTable">
    //..
    <tbody>
        @{ 
            int i = 0;   //add this..
        }
        @foreach (var item in Model.Products)
        {
            <tr>
                <td>
                                        //change the onchange function...
                    <input type="number" id="quantityInput" onchange="calcSubTotal(this,@i)" min="0" value="0" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td id="priceLabel_@i">           //change here...
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td id="labelSubTotal_@i"></td>    //change here...
            </tr>
            i++;   //add this....
        }
    </tbody>

</table>
@section Scripts
{
    <script type="text/javascript">
        function calcSubTotal(element,index) {
            var numberInput = $(element).val();  
            var amount = parseFloat(numberInput);
            var priceLabel = document.getElementById('priceLabel_'+index);
            var priceValue = priceLabel.innerText;
            var price = parseFloat(priceValue);
            var totalPrice = amount * price;
            var subTotalLabel = document.getElementById('labelSubTotal_'+index);
            subTotalLabel.innerText = totalPrice.toString();
        }
    </script>       
}

Result: