Adding a custom price calculator to webstore

I have 2 separate custom code liquid blocks on my product page that look like this:

For input fields for Width and Height:

<div class="product-custom-options">
  <label for="custom-width" style="display: block; margin-top: 10px;">Width (mm)</label>
  <input type="number" id="custom-width" name="properties[Width]" 
         min="1" max="3000" step="1" 
         placeholder="Enter width in mm" 
         class="product-form__input" 
         style="width: 100%; padding: 10px; margin-bottom: 10px;border-style:solid">

  <label for="custom-height" style="display: block; margin-top: 10px;">Height (mm)</label>
  <input type="number" id="custom-height" name="properties[Height]" 
         min="1" max="3000" step="1" 
         placeholder="Enter height in mm" 
         class="product-form__input" 
         style="width: 100%; padding: 10px; margin-bottom: 10px;border-style:solid">
</div>

<input type="hidden" id="hidden-width" name="properties[Width]" value="">
<input type="hidden" id="hidden-height" name="properties[Height]" value="">

For custom field for calculated price:

<div class="calculated-price" style="margin-top: 15px;display: none;">
  <strong>Calculated Price:</strong> 
  <span id="custom-price">R0.00</span>
</div>


<input type="hidden" id="hidden-calculated-price" name="properties[Calculated Price]" value="">

And I edited the code for main-product.liquid:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set your base price per square meter
    const basePricePerSquareMeter = 50;

    // Elements
    const widthInput = document.getElementById('custom-width');
    const heightInput = document.getElementById('custom-height');
    const quantityInput = document.querySelector('.quantity__input');
    const priceBlock = document.querySelector('.price-item.price-item--regular');
    const customPriceDisplay = document.getElementById('custom-price');
    const variantSelect = document.querySelectorAll('[name="id"]');

    // Check if all elements are found
    if (!widthInput || !heightInput || !quantityInput || !customPriceDisplay) {
        console.error("One or more elements (width, height, quantity, or price display) are missing.");
        return;
    }

    const hiddenWidth = document.getElementById('hidden-width');
    const hiddenHeight = document.getElementById('hidden-height');
    const hiddenCalculatedPrice = document.getElementById('hidden-calculated-price');

    // Function to calculate and display the price
    function calculatePrice() {
        const width = parseFloat(widthInput.value) || 0;
        const height = parseFloat(heightInput.value) || 0;
        const quantity = parseInt(quantityInput.value) || 1;

        const areaInSquareMeters = (width * height) / 1000000; // Convert mm² to m²

        // Variant price adjustment if applicable
        let variantPriceAdjustment = 1;
        variantSelect.forEach((variant) => {
            if (variant.checked || variant.selected) {
                const variantData = JSON.parse(variant.getAttribute('data-variant-json'));
                variantPriceAdjustment = variantData ? variantData.price : 1;
            }
        });

        // Calculate final price
        const calculatedPrice = areaInSquareMeters * basePricePerSquareMeter * variantPriceAdjustment * quantity;

        // Update the displayed prices
        priceBlock.textContent = `R${calculatedPrice.toFixed(2)}`;
        customPriceDisplay.textContent = `R${calculatedPrice.toFixed(2)}`;

        // Update hidden fields for cart submission
        hiddenWidth.value = `${width} mm`;
        hiddenHeight.value = `${height} mm`;
        hiddenCalculatedPrice.value = `R${calculatedPrice.toFixed(2)}`;
    }

    // Event listeners for input changes
    widthInput.addEventListener('input', calculatePrice);
    heightInput.addEventListener('input', calculatePrice);
    quantityInput.addEventListener('input', calculatePrice);
    
    variantSelect.forEach((variant) => {
        variant.addEventListener('change', calculatePrice);
    });

    // Event listeners for plus and minus buttons
    const minusButton = document.querySelector('.quantity__button[name="minus"]');
    const plusButton = document.querySelector('.quantity__button[name="plus"]');

    minusButton.addEventListener('click', () => setTimeout(calculatePrice, 50));
    plusButton.addEventListener('click', () => setTimeout(calculatePrice, 50));

  const addToCartButton = document.querySelector('button[name="add"]');
    if (addToCartButton) {
        addToCartButton.addEventListener('click', function(e) {
            // Prevent default action initially to allow for price calculation
            e.preventDefault();
            // Calculate price first
            calculatePrice();

            // After calculation, submit the form now
            const form = addToCartButton.closest('form');
            if (form) {
                form.submit();
            }
        });
    }

    // Initial calculation on page load
    calculatePrice();
});
</script>

however when trying to add the item to cart. It appears as 0.00 and whatever I do I cannot get the price to show up in the cart.