Why does only one of the two functions work, i.e. the one called first?

This is the table function for adding data into a table:

const table = () => {
  let table_details = document.getElementById("table_details")
  let data = localStorage.getItem("projects")
  
  if (data == null) {
    arr = []
  }
  else {
    tabledata = JSON.parse(data);
  }
  
  console.log(tabledata)
  projectTable = ""
  tabledata.map((items, index) => {
    projectTable += `<tr><td>${index}</td> <td>${items.pname}</td> <td>${items.pleader}</td> <td>${items.pstatus}</td> <td>${items.pcompany}</td><tr/>`
  })
  tabledata.length > 0 ? (table_details.innerHTML = projectTable) : (`No project found !`)
}

This is the projectDetails function for showing data as cards:

const projectDetails = () => {
  let projectDetails = document.getElementById("project_details");
  let data = localStorage.getItem("projects");

  if (data == null) {
    arr = [];
  }
  else {
    projectdata = JSON.parse(data); //converting data into an array
  }

  showDetails = "";
  console.log(projectdata)
  projectdata.forEach((items, index) => {
    showDetails += ` <div class="card-body col-6 p-3  " style ="width:30rem">
    <span class ="card-title"><p class = "text-info">projectName:  ${items.pname}</p> <a href="#"> leader:${items.pleader} </a> 
      </span><p class ="card-text p-0">description:${items.pdesc}</p><p class = "text-muted p-0 m-0">[status:${items.pstatus}] <br> <button  onclick = "deleteProject(${index})" class = "btn btn-info  p-1">delete</button>
      </div> <hr>`
  });

  if (projectdata.length > 0) {
    projectDetails.innerHTML = showDetails
  }
  else {
    (projectDetails.innerHTML = `<h4 class = "text-danger"><strong>No Projects Found !</strong></h4>`);
  }
}

This is how both functions get called:

table();
projectDetails();

When calling two functions, only one function is working: the one which is called first.