Only first table is sorting with JavaScript

Question

I have three tables on the page. It must be sorting by some value (year in my case).

<table id="table1">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>2010</td>
  </tr>
  <tr>
    <td>Pete</td>
    <td>Brown</td>
    <td>2015</td>
  </tr>
  <tr>
    <td>Ann</td>
    <td>Lee</td>
    <td>2005</td>
  </tr>
</table>

<table id="table2">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>2010</td>
  </tr>
  <tr>
    <td>Pete</td>
    <td>Brown</td>
    <td>2015</td>
  </tr>
  <tr>
    <td>Ann</td>
    <td>Lee</td>
    <td>2005</td>
  </tr>
</table>

<script>
  let sortedRows = Array.from(table1.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table1.tBodies[0].append(...sortedRows);
</script>
<script>
  let sortedRows = Array.from(table2.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table2.tBodies[0].append(...sortedRows);
</script>
<script>
  let sortedRows = Array.from(table3.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table3.tBodies[0].append(...sortedRows);
</script>

However, only the first table is sorting correctly whereas sorting in second and third table aren't work. What is a reason and how it would be solved? Sorry for the ridiculous question.

Answer 1

You got exception: Uncaught SyntaxError: Identifier 'sortedRows' has already been declared. You need to remove second and third let before sortedRows:

    let sortedRows = Array.from(table1.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table1.tBodies[0].append(...sortedRows);
    sortedRows = Array.from(table2.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table2.tBodies[0].append(...sortedRows);
    sortedRows = Array.from(table3.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table3.tBodies[0].append(...sortedRows);

<table id="table1">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

  <table id="table2">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

  <table id="table3">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

Tables 2 and 3 with id's table2 and table3 are same.