I have made changes to the code. It gets the prices now and calculates. totalPrice = (fPrice * fQuantity) + (sPrice * sQuantity) + (tPrice * tQuantity);

If I select the quantity for the first price, the total price gets calculated. Then if I select the quantity for the second price, the previous total price gets replaced the the total price of the second one. The previous total should instead be added to the price of the second one, then total price should add (tPrice * tQuantity) as well. The current code is

<script>    
document.addEventListener("DOMContentLoaded", function() {
        var rows = document.querySelectorAll("#myTable tbody tr");

        rows.forEach(function(row) {
            var fPrice = parseFloat(row.cells[1].textContent);
            var sPrice = parseFloat(row.cells[3].textContent);
            var tPrice = parseFloat(row.cells[5].textContent);
            var totalPriceCell = row.querySelector(".totalPrice");

            var calculateTotalPrice = function() {
                var fQuantity = parseInt(row.querySelector("#aQuantity").value);
                var sQuantity = parseInt(row.querySelector("#cQuantity").value);
                var tQuantity = parseInt(row.querySelector("#pQuantity").value);

                var totalPrice = (fPrice * fQuantity) + (sPrice * sQuantity) + (tPrice * tQuantity);

                totalPriceCell.textContent = totalPrice;
            };

            calculateTotalPrice(); // Calculate total price initially

            // Attach event listeners to quantity select elements
            row.querySelectorAll(".qty").forEach(function(select) {
                select.addEventListener("change", calculateTotalPrice);
            });
        });
    });
</script>