Sort two tables in same function using Javascript

Question

I need to sort these two tables in the same function. When I click name in first table so it will sort second table also by name.

I have this function where can sort table and it is working, but it only sorts one table.

What changes are needed to sort both tables?

 function sortTable(table, column, asc = true) {
        const dirModifier = asc ? 1 : -1;
        const tBody = table.tBodies[0];
        const rows = Array.from(tBody.querySelectorAll("tr"));
    
        const sortedRows = rows.sort((a, b) => {
            const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
            const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    
            return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
        });
    
        while (tBody.firstChild) {
            tBody.removeChild(tBody.firstChild);
        }
    
        tBody.append(...sortedRows);
    
        table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
    }
    
    document.querySelectorAll(".table-sortable th").forEach(headerCell => {
        headerCell.addEventListener("click", () => {
            const tableElement = headerCell.parentElement.parentElement.parentElement;
            const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
            const currentIsAscending = headerCell.classList.contains("th-sort-asc");
    
            sortTable(tableElement, headerIndex, !currentIsAscending);
        });
    });

<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>

Answer 1

You can run sortTable function for each table.

var tables =document.getElementsByClassName("table-sortable");
sortTable(tables[0], headerIndex, !currentIsAscending);
sortTable(tables[1], headerIndex, !currentIsAscending);

 function sortTable(table, column, asc = true) {
        const dirModifier = asc ? 1 : -1;
        const tBody = table.tBodies[0];
        const rows = Array.from(tBody.querySelectorAll("tr"));
    
        const sortedRows = rows.sort((a, b) => {
            const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
            const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
    
            return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
        });
    
        while (tBody.firstChild) {
            tBody.removeChild(tBody.firstChild);
        }
    
        tBody.append(...sortedRows);
    
        table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
        table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
    }
    
    document.querySelectorAll(".table-sortable th").forEach(headerCell => {
        headerCell.addEventListener("click", () => {
            const tableElement = headerCell.parentElement.parentElement.parentElement;
            const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
            const currentIsAscending = headerCell.classList.contains("th-sort-asc");
            var tables =document.getElementsByClassName("table-sortable");
            sortTable(tables[0], headerIndex, !currentIsAscending);
      sortTable(tables[1], headerIndex, !currentIsAscending);
      
        });
    });

<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
<table class="table-sortable">
    <thead>
      <tr>
        <th>name</th>
        <th>adress</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tom</td>
        <td>Oslo</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Per</td>
        <td>London</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Hary</td>
        <td>Madrid</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>