how to solve javascript and php connect error

<div class="container-fluid mt-4 d-flex justify-content-center w-100">
  <div class="table-responsive w-100">
    <table class="table table-bordered">
      
      <thead>
        <tr>
          <th>#</th>
          <th>Product</th>
          <th>Quantity</th>
          <th>Unit cost</th>
          <th>Total</th>
          <th> </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td style="width: 30%;">
            <?php
              include_once "classes/users.php";

              $options = new Selects($connect);
              $options->ProductsSelects();
            ?>
          </td>             
          <td><input type="number" class="form-control quantity" name="quantity[]" oninput="calc(this)" required> Pcs</td>
          <td><input type="number" class="form-control price" name="price[]" oninput="calc(this)" required> EGP</td>
          <td><input type="text" class="form-control total" name="total[]" readonly> EGP</td>
          <td><button type="button" class="delete-row-button btn btn-danger" style="font-size: 12px;" disabled>Delete</button></td>
        </tr>
      </tbody>

    </table>
  </div>
</div>

<div class="container-fluid w-100">
  <button name="submit" class="btn btn-primary float-end mt-4 ms-2"><i data-feather="send" class="me-3 icon-md"></i>Submit</button>
  <button class="btn btn-outline-success float-end mt-4" id="add-row-button"><i data-feather="plus" class="me-2 icon-md"></i>Add Row</button>
</div>


<script>

  let rowCount = 2;

  const addRowButton = document.getElementById("add-row-button");
  const tableBody = document.querySelector("tbody");

  addRowButton.addEventListener("click", () => {
    const newRow = document.createElement("tr");
    newRow.innerHTML = `
      <td>${rowCount}</td>

      <td style="width: 30%;">
      <?php
        include_once "classes/users.php";

        $get_products = new Selects($connect);
        $get_products->ProductsSelects();
      ?>
      </td>

      <td><input type="number" class="form-control quantity" name="quantity[]" oninput="calc(this)" required> Pcs</td>
      <td><input type="number" class="form-control price" name="price[]" oninput="calc(this)" required> EGP</td>
      <td><input type="text" class="form-control total" name="total[]" readonly> EGP</td>
      <td><button type="button" class="delete-row-button btn btn-danger" style="font-size: 12px;">Delete</button></td>
    `;
    tableBody.appendChild(newRow);

    rowCount++;

    const deleteButton = newRow.querySelector(".delete-row-button");
    deleteButton.addEventListener("click", () => {
      tableBody.removeChild(newRow);
      updateTotalSum();
    });
  });

  const initialDeleteButton = document.querySelector(".delete-row-button");
  initialDeleteButton.addEventListener("click", () => {
    tableBody.removeChild(initialDeleteButton.parentElement.parentElement);
    updateTotalSum();
  });

  function calc(inputElement) {
    var row = inputElement.closest("tr");
    var quantities = row.querySelectorAll(".quantity");
    var prices = row.querySelectorAll(".price");
    var totalField = row.querySelector(".total");

    var totalSum = 0;

    for (var i = 0; i < quantities.length; i++) 
    {
      var quantity = parseFloat(quantities[i].value) || 0;
      var price = parseFloat(prices[i].value) || 0;
      var total = quantity * price;
      totalSum += total;
    }

    totalField.value = totalSum.toFixed(2);
    updateTotalSum();
  }

  function updateTotalSum() {
    var totalSum = 0;
    var totalFields = document.querySelectorAll(".total");

    totalFields.forEach(function (totalField) {
        totalSum += parseFloat(totalField.value) || 0;
    });

    const discountAmount = calculateDiscountAmount(totalSum);
    const discountedTotal = totalSum - discountAmount;

    document.getElementById("totally").innerText = `EGP ${totalSum.toFixed(2)}`;
    document.getElementById("discountAmount").innerText = `(-) EGP ${discountAmount.toFixed(2)}`;
    document.getElementById("ftotally").innerText = `EGP ${discountedTotal.toFixed(2)}`;
  }

  function calculateDiscountAmount(totalSum) {
    const discountPercentage = parseFloat(document.getElementById("discount").value) || 0;
    return totalSum * (discountPercentage / 100);
  }

  const discountInput = document.getElementById("discount");
  discountInput.addEventListener("input", updateTotalSum);
</script>

<?php

  if (isset($_POST['submit'])) 
  {
    $quantities = $_POST['quantity'];
    $prices = $_POST['price'];
    $total = $_POST['total'];
    $product = $_POST['product'];

    $number = rand();

    $conn = mysqli_connect("localhost", "root", "", "accounting");
    if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
    }

    foreach ($quantities as $index => $quantity) 
    {
      $product = $product[$index];
      $price = $prices[$index];
      $total = $total[$index];

      $insert = "INSERT INTO invoice_row (invoice_number, quantity, product, price, total) VALUES ('$number', '$quantity', '$product', '$price', '$total')";
      mysqli_query($conn, $insert);
    }


    echo "Successfully";
  }
?>

I want to add row and get product name but unfortunately the name get at first row but the other row inserted by javascript don’t get the name and not inserted in database and I tried to add the php code straight without function and classes called and the chatGPT and blackbox ai can’t do anything in this error