How to keep the order intact as it is in the response got from the API call using vanilla js?

I'm trying to fetch the list of products from the API with passing the query for ascending and descending orders. After clicking desc from the dropdown, the response I'm getting is correct but the order in which it should list out the elements in the page is getting wrong.

Any help with the problem would be appreciated. I have attached the below image as a problem reference:

I have shared the below code and a Test Demo Link for your reference.

const app = document.getElementById("app");
const table = document.createElement("table");
const loader = document.createElement("div");
const API_URL = `https://fakestoreapi.com`;
let ORDER = `asc`;
loader.innerHTML = `Loader..`;

function hideLoader() {
  app.removeChild(loader);
}

function showLoader() {
  app.appendChild(loader);
}

app.innerHTML = `
<h1>List</h1>
`;

const select = document.createElement("select");
const option1 = document.createElement("option");
const option2 = document.createElement("option");
option1.value = "aesc";
option1.innerHTML = "aesc";
option2.value = "desc";
option2.innerHTML = "desc";
select.appendChild(option1);
select.appendChild(option2);
app.appendChild(select);
select.addEventListener("change", (e) => handleChange(e));

function handleChange(e) {
  fetchData(e.target.value);
}

async function fetchData(order) {
  showLoader();
  const response = await fetch(`${API_URL}/products?sort=${order}`);
  const data = await response.json();
  displayData(data);
}

function displayData(data) {
  const tbody = document.createElement("tbody");
  console.log("data", data);
  data.forEach((item) => {
    const tr = document.createElement("tr");
    tr.key = item.id;
    tr.innerHTML = `
        <td>${item.id}</td>
        <td>${item.title}</td>
        <td>${item.price}</td>
    `;
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);
  app.appendChild(table);
  hideLoader();
}

fetchData(ORDER);

Solution

The issue here is that a new table is added each time we call the API.

If we remove any existing table before adding the products, the issue will be resolved.

// Remove table and rebuild if it exists.
let tbody = document.getElementById("productTable");
if (tbody) {
    tbody.remove();
}

Full code snippet:

const app = document.getElementById("app");
const table = document.createElement("table");
const loader = document.createElement("div");
const API_URL = `https://fakestoreapi.com`;
let ORDER = `asc`;
loader.innerHTML = `Loader..`;

function hideLoader() {
  app.removeChild(loader);
}

function showLoader() {
  app.appendChild(loader);
}

  app.innerHTML = `
<h1>List</h1>
`;

const select = document.createElement("select");
const option1 = document.createElement("option");
const option2 = document.createElement("option");
option1.value = "aesc";
option1.innerHTML = "aesc";
option2.value = "desc";
option2.innerHTML = "desc";
select.appendChild(option1);
select.appendChild(option2);
app.appendChild(select);
select.addEventListener("change", (e) => handleChange(e));

function handleChange(e) {
  fetchData(e.target.value);
}

async function fetchData(order) {
  showLoader();
  const response = await fetch(`${API_URL}/products?sort=${order}`);
  const data = await response.json();
  displayData(data);
}

function displayData(data) {
  // Remove table and rebuild if it exists.
  let tbody = document.getElementById("productTable");
  if (tbody) {
    tbody.remove();
  }
  tbody = document.createElement("tbody");
  tbody.setAttribute("id", "productTable");
  
  console.log("data", data);
  data.forEach((item) => {
    const tr = document.createElement("tr");
    tr.key = item.id;
    tr.innerHTML = `
        <td>${item.id}</td>
        <td>${item.title}</td>
        <td>${item.price}</td>
    `;
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);
  app.appendChild(table);
  hideLoader();
}

fetchData(ORDER);

<div id="app"></div>