Saving a table from html to sql using php and javascript

    function addToTable() {

    const items1 = document.getElementById("items1");
    const selectedOption1 = items1.value;
    const selectedText = items1.options[items1.selectedIndex].text;

    const selectedDate = document.getElementById("date").value;
    const dateControl = document.querySelector('input[type="datetime-local"]');

    const userAmount2 = document.getElementById("userAmount2").value;
    const userAmount3 = document.getElementById("userAmount3").value;
    const userAmount4 = document.getElementById("userAmount4").value;
    const userAmount5 = document.getElementById("userAmount5").value;
    const userAmount6 = document.getElementById("userAmount6").value;
    const userAmount7 = document.getElementById("userAmount7").value;

    const tableBody = document.getElementById("tableBody");
    const newRow = tableBody.insertRow();

    const cell1 = newRow.insertCell();
    cell1.innerHTML = selectedText;

    const cell2 = newRow.insertCell();
    cell2.innerHTML = userAmount2;

    const cell3 = newRow.insertCell();
    cell3.innerHTML = userAmount3;

    const cell4 = newRow.insertCell();
    cell4.innerHTML = userAmount4;

    const cell5 = newRow.insertCell();
    cell5.innerHTML = userAmount5;

    const cell6 = newRow.insertCell();
    cell6.innerHTML = userAmount6;

    const cell7 = newRow.insertCell();
    cell7.innerHTML = userAmount7;

    const cell8 = newRow.insertCell();
    cell8.innerHTML = selectedDate;

    const form = document.getElementById("MyForm")[0];
    form.submit();
    form.reset();
    $('#myForm')[0].reset();
    
    //form.addEventListener("submit", function (event) {
    //  event.preventDefault();
    //});
    // No need for event listener on this, will leave in for possible future thing?
}

function showSuccessCard(){
  const successCard = document.createElement("div");
  successCard.className = "sucess-card";

  successCard.innerHTML = "<p>Record has been saved successfully!<p>";

  setTimeout(function() {
    document.body.removeChild(successCard);
  }, 3000);
}

function saveToDatabase() {
  var formData = $("#MyForm").serialize();
    const tableData = [];
    const rows = document.querySelectorAll("#tableBody tr");
    rows.forEach((row) => {
        const cells = row.querySelectorAll("td");
        const rowData = {
          option1: cells[0].innerText,
          user_amount1: cells[1].innerText,
          user_amount2: cells[2].innerText,
          user_amount3: cells[3].innerText,
          user_amount4: cells[4].innerText,
          user_amount5: cells[5].innerText,
          user_amount: cells[6].innerText,
          date: cells[7].innerText,
        };
        tableData.push(rowData);

        $.ajax({
          type: "POST",
          url: "dcop.inven.php",
          data: tableData,
          success: function(response) {
  
            alert("Your information has been saved");
  
            updateTable(response);
          },
          error: function(error) {
            console.error("Error saving data:", error);
          }
        });

    });
return false;

}

I am trying to save the table no the user inputs. I am new to programming and trying to teach myself but I am stuck on this problem. When I try to have my information to the sql server all it does it take what is in the input fields not the table. I will input multiple items in the table but I only save 1 thing, what is in the user input section. I am sure I am missing something but with me being new to this I am stumped.