when i purchace smth from the table it just says NAN on the check out page.It will not display the acctualprice.

This is the table and in html

 <form id="purchaseForm">
        <table class="shopping-cart">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Details</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody id="productDetails">
                
            </tbody>
            <tr class="grandTotal">
                <td colspan="4"></td>
                <td>Total:</td>
                <td><input type="text" id="grandTotal" name="grandTotal" readonly></td>
            </tr>
        </table>
        <button type="button" onclick="submitForm()">Submit</button>
        <button type="reset">Reset</button>
    </form>
    <script src="js/API.js"></script>
    
    <div id="confirm">
        <h2>Confirmation</h2>
        <div id="confirmationItems"></div>
        <div id="confirmationTotal"></div>
        <p>Shipping Fee: $7.99</p>
        <p>Total Amount (including shipping): <span id="totalAmount"></span></p>
    </div>

this is the calcultions

function calculateTotal(itemNumber) {
  const price = [179.99, 109.99, 569.99, 94.47, 249.99]; // Prices for each item
  const quantity = parseInt(document.forms["purchaseForm"]["quantity" + itemNumber].value);
  const subtotal = price[itemNumber - 1] * quantity;
  
  document.forms["purchaseForm"]["total" + itemNumber].value = subtotal;

  updateGrandTotal();
}

function updateGrandTotal() {
  const total1 = parseFloat(document.forms["purchaseForm"]["total1"].value) || 0;
  const total2 = parseFloat(document.forms["purchaseForm"]["total2"].value) || 0;
  const total3 = parseFloat(document.forms["purchaseForm"]["total3"].value) || 0;
  const total4 = parseFloat(document.forms["purchaseForm"]["total4"].value) || 0;
  const total5 = parseFloat(document.forms["purchaseForm"]["total5"].value) || 0;

  const grandTotal = total1 + total2 + total3 + total4 + total5;

  document.forms["purchaseForm"]["grandTotal"].value = grandTotal;
}

function submitForm() {
  const grandTotal = document.forms["purchaseForm"]["grandTotal"].value;
  alert("Total Amount Due: €" + grandTotal);
}

this it the confirm page that is not working

   function submitForm() { $('#confirm').show();
 var grandTotal = parseFloat($("#grandTotal").val());

    var items = [];
    $("#productDetails tr").each(function() {
        var itemName = $(this).find("td:eq(0)").text();
        var quantity = parseInt($(this).find("td:eq(3)").text());
        var total = parseFloat($(this).find("td:eq(4)").text());
        items.push({ itemName: itemName, quantity: quantity, total: total });
    });

    $("#confirmationItems").empty();
    items.forEach(function(item) {
        $("#confirmationItems").append("<p>Item: " + item.itemName + ", Quantity: " + item.quantity + ", Total: $" + item.total + "</p>");
    });

    $("#confirmationTotal").text("Total Amount: $" + grandTotal);
 
    var shippingFee = 7.99;
    var totalAmount = grandTotal + shippingFee;
    $("#totalAmount").text(totalAmount.toFixed(2));
}

table is filled out by an api

for it to show the price on the Total amoutI.

I do not know where the problem lies and i would appreciete any help with this.