innerHTML for new elements works only once

Question

i'm trying to create a table of clients but every time i create a new client its being created with the values of the first client.

it seems that the elements are deleted and recreated agein and agein.

99% of the code scoped into arrow function exept for the customers array which is global.

HTML:

        <table class="customersTable">
          <thead>
            <tr class="headingRow">
              <th>
                <input
                  type="checkbox"
                  name="masterCheckBox"
                  class="masterCheckBox"
                />
              </th>
              <th>מספר סידורי</th>
              <th>מספר לקוח</th>
              <th>איש קשר</th>
              <th>בית העסק</th>
              <th>עיר</th>
              <th>רחוב ומספר</th>
              <th>קומה</th>
              <th>כניסה</th>
              <th>טלפון</th>
              <th>אימייל</th>
              <th>הערות</th>
            </tr>
          </thead>
          <tbody class="customersTbody"></tbody>
        </table>

javascript: create elements function

createRow = () => {
  const Row = document.createElement(`tr`);
  const checkBoxTD = document.createElement(`td`);
  const serialNumberTD = document.createElement(`td`);
  const uniqueIDTD = document.createElement(`td`);
  const contactNameTD = document.createElement(`td`)
  const businnesNameTD = document.createElement(`td`);
  const cityTD = document.createElement(`td`);
  const streetAndNumberTD = document.createElement(`td`);
  const floorTD = document.createElement(`td`);
  const entranceTD = document.createElement(`td`);
  const emailTD = document.createElement(`td`);
  const phoneTD = document.createElement(`td`);
  const textAreaTD = document.createElement(`td`);

  return {
    Row,
    checkBoxTD,
    serialNumberTD,
    uniqueIDTD,
    contactNameTD,
    businnesNameTD,
    cityTD,
    streetAndNumberTD,
    floorTD,
    entranceTD,
    emailTD,
    phoneTD,
    textAreaTD,
  };
};

inject values function

injectRowValues = () => {
  const createdRowElements = createRow();
  const dataArray = convertAndLoad();
  const uniqueID = generateID();
  const customersTbody = document.querySelector(`.customersTbody`);

  let checkBoxTD = createdRowElements.checkBoxTD;
  let serialNumberTD = createdRowElements.serialNumberTD;
  let uniqueIDTD = createdRowElements.uniqueIDTD;
  let contactNameTD = createdRowElements.contactNameTD;
  let businnesNameTD = createdRowElements.businnesNameTD;
  let cityTD = createdRowElements.cityTD;
  let streetAndNumberTD = createdRowElements.streetAndNumberTD;
  let floorTD = createdRowElements.floorTD;
  let entranceTD = createdRowElements.entranceTD;
  let phoneTD = createdRowElements.phoneTD;
  let emailTD = createdRowElements.emailTD;
  let textAreaTD = createdRowElements.textAreaTD;

  for (let i = 0; i < customers.length ; i++) {
    console.log(customers);
    checkBoxTD.innerHTML = `<input type="checkbox" name="masterCheckBox" class="masterCheckBox" />`;
    serialNumberTD.innerHTML = customersTbody.childNodes.length;
    uniqueIDTD.innerHTML = uniqueID;
    contactNameTD.innerHTML = dataArray[customers.length - customers.length].contactInput;
    businnesNameTD.innerHTML = dataArray[i].businnesNameInput;
    cityTD.innerHTML = dataArray[i].cityInput;
    streetAndNumberTD.innerText = dataArray[i].streetAndNumberInput;
    floorTD.innerHTML = dataArray[i].floorInput;
    entranceTD.innerHTML = dataArray[i].entranceInput;
    emailTD.innerHTML = dataArray[i].emailInput.toLowerCase();
    phoneTD.innerText = `${dataArray[i].phoneInput1} \n ${dataArray[i].phoneInput2}`;
    textAreaTD.innerText = dataArray[i].addCustomerTextArea;
     console.log(customers);

    return {
      checkBoxTD,
      serialNumberTD,
      uniqueIDTD,
      contactNameTD,
      businnesNameTD,
      cityTD,
      streetAndNumberTD,
      floorTD,
      entranceTD,
      emailTD,
      phoneTD,
      textAreaTD,
    };
  }
};

append function

appendRow = () => {
  const createdRowElement = createRow();
  const createdRowElements = injectRowValues();
  const customersTbody = document.querySelector(`.customersTbody`);

  customersTbody.append(createdRowElement.Row);
  createdRowElement.Row.append(
    createdRowElements.checkBoxTD,
    createdRowElements.serialNumberTD,
    createdRowElements.uniqueIDTD,
    createdRowElements.contactNameTD,
    createdRowElements.businnesNameTD,
    createdRowElements.cityTD,
    createdRowElements.streetAndNumberTD,
    createdRowElements.floorTD,
    createdRowElements.entranceTD,
    createdRowElements.phoneTD,
    createdRowElements.emailTD,
    createdRowElements.textAreaTD
  )
  closeModal();
};