I'm building an expense tracker app that saves data entered into a form, then registered into a table under(Name, Date and Amount) inputs, it then saves that data in the browser's local storage as an array. I am trying to retrieve the table data as it was registered into the table(in the correct rows and columns) when the page is reloaded.

//FUNCTION TO GET EXISTING EXPENSES FROM LOCAL STORAGE WHEN PAGE IS REFRESHED (display Table on the screen with refreshing Page)
function getExpenses(expenses) {
  //CHECK If an expense exists in Local Storage
  //Checks if expense exists

  if (localStorage.getItem("expenses") === null) {
    expenses = []; //create a new array for expenses if none exists
  } else {
    expenses = JSON.parse(localStorage.getItem("expenses")); //Gets back the array of existing expenses if expenses exist
  }

  expenses.forEach((item) => {

    //create <tr></tr>
    const tableRow = document.createElement("tr"); //new table row
    tableRow.classList.add("table-row"); //set class to t-row
    tableHead.appendChild(tableRow); //Append new row(.tableHead) to the table in HTML

    //create <td></td>
    const tableDataA = document.createElement("td"); //New Table Data Element
    tableDataA.innerText = item;
    tableRow.appendChild(tableDataA);

    const tableDataB = document.createElement("td");
    tableDataB.innerText = item;
    tableRow.appendChild(tableDataB);

    const tableDataC = document.createElement("td");
    tableDataC.innerText = item;
    tableRow.appendChild(tableDataC);

    //APPEND 
    expenseTable.appendChild(tableRow); //To Append .t-row to the Table element in our HTML file

  });

}