Duplicate Javascript not working on other table | Laravel 11.xx

Hi, I'm having a tough time with getting JS to behave. I'm not really good with JS and frankly I told GPT to write this for me and modified it slightly to make it work on my tables.

The 2 functions are sorting algo's that makes a table sort in ascending or descending order, and are basically duplicates based off of each other but for some reason the id="tableUser" one works, but the other one, id="tableAll", does not.

I'm plucking my hair out because it is for an assignment due tomorrow. Pls halp.

HTML + JS for id="tableUser", the one that works:

JS
function sortTableUser(n) {
          var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
          table = document.getElementById("tableUser");
          switching = true;
          //Set the sorting direction to ascending:
          dir = "asc"; 
          /*Make a loop that will continue until
          no switching has been done:*/
          while (switching) {
            //start by saying: no switching is done:
            switching = false;
            rows = table.rows;
            /*Loop through all table rows (except the
            first, which contains table headers):*/
            for (i = 1; i < (rows.length - 1); i++) {
                //start by saying there should be no switching:
                shouldSwitch = false;
                /*Get the two elements you want to compare,
                one from current row and one from the next:*/
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                /*check if the two rows should switch place,
                based on the direction, asc or desc:*/
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }

            if (shouldSwitch) {
                /*If a switch has been marked, make the switch
                and mark that a switch has been done:*/
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                //Each time a switch is done, increase this count by 1:
                switchcount++;
            } else {
                /*If no switching has been done AND the direction is "asc",
                set the direction to "desc" and run the while loop again.*/
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
              }
            }
          }

HTML
<div style="overflow-x:auto;">
        <table class="table table-hover" id="tableUser">
          <thead>
              <tr>
                <th onclick="sortTableUser(0)"><strong>Aangemaakt</strong></th>
                <th onclick="sortTableUser(1)"><strong>Geslacht</strong></th>
                <th onclick="sortTableUser(2)"><strong>Soort</strong></th>
                <th onclick="sortTableUser(3)"><strong>Vangplaats</strong></th>
                <th onclick="sortTableUser(4)"><strong>AS</strong></th>
                <th onclick="sortTableUser(5)"><strong>KV</strong></th>
                <th onclick="sortTableUser(6)"><strong>Notitie</strong></th>
                <th onclick="sortTableUser(7)"><strong>Ondersoort</strong></th>
                <th onclick="sortTableUser(8)"><strong>M/V</strong></th>
                <th onclick="sortTableUser(9)"><strong>Aantal</strong></th>
                <th onclick="sortTableUser(10)"><strong>Groep</strong></th>
                <th onclick="sortTableUser(11)"><strong>Jongen</strong></th>
                <th><strong>Delete</strong></th>
              </tr>
          </thead>
          @foreach ($registraties as $registratie)
          <tr>
            <td>{{ $registratie->created_at->format('j-n-Y') }}</td>
              <td>{{ $registratie->geslachtsnaam }}</td>
              <td>{{ $registratie->soortnaam }}</td>
              <td>{{ $registratie->vangplaats }}</td>
              <td>{{ $registratie->AS }}</td>
              <td>{{ $registratie->KV }}</td>
              <td>{{ $registratie->notitie }}</td>
              <td>{{ $registratie->ondersoort }}</td>
              <td>{{ $registratie->mv }}</td>
              <td>{{ $registratie->aantal }}</td>
              <td>{{ $registratie->groep }}</td>
              <td>{{ $registratie->jongen }}</td>
              @can('delete', $registratie)
              <td style="text-align:center; vertical-align:middle">            
                <form class="delete-post-form d-inline" action="/registratie/{{ $registratie->id }}" method="POST">
                  @csrf
                  @method('DELETE')
                  <button class="delete-post-button text-danger" data-toggle="tooltip" data-placement="top" title="Verwijderen"><i style="color:red" class="fas fa-trash"></i></button>
                </form>
              </td>
              @endcan
          </tr>
          @endforeach
          {{ $registraties->links() }}
          
        </table>
      </div>

HTML + JS for id="tableAll", the one that does NOT work:

JS
function sortTableAll(n) {
          var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
          table = document.getElementById("tableAll");
          switching = true;
          //Set the sorting direction to ascending:
          dir = "asc"; 
          /*Make a loop that will continue until
          no switching has been done:*/
          while (switching) {
            //start by saying: no switching is done:
            switching = false;
            rows = table.rows;
            /*Loop through all table rows (except the
            first, which contains table headers):*/
            for (i = 1; i < (rows.length - 1); i++) {
                //start by saying there should be no switching:
                shouldSwitch = false;
                /*Get the two elements you want to compare,
                one from current row and one from the next:*/
                x = rows[i].getElementsByTagName("TD")[n];
                y = rows[i + 1].getElementsByTagName("TD")[n];
                /*check if the two rows should switch place,
                based on the direction, asc or desc:*/
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        //if so, mark as a switch and break the loop:
                        shouldSwitch = true;
                        break;
                    }
                }
            }

            if (shouldSwitch) {
                /*If a switch has been marked, make the switch
                and mark that a switch has been done:*/
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                //Each time a switch is done, increase this count by 1:
                switchcount++;
            } else {
                /*If no switching has been done AND the direction is "asc",
                set the direction to "desc" and run the while loop again.*/
                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
              }
            }
          }

HTML
 <div style="overflow-x:auto;">
            <table class="table table-hover" id="tableAll">
                <thead>
                    <tr>
                        <th onclick="sortTableAll(0)"><strong>Lidnummer</strong></th>
                        <th onclick="sortTableAll(1)"><strong>Geslacht</strong></th>
                        <th onclick="sortTableAll(2)"><strong>Soort</strong></th>
                        <th onclick="sortTableAll(3)"><strong>Vangplaats</strong></th>
                        <th onclick="sortTableAll(4)"><strong>AS</strong></th>
                        <th onclick="sortTableAll(5)"><strong>KV</strong></th>
                        <th onclick="sortTableAll(6)"><strong>Notitie</strong></th>
                        <th onclick="sortTableAll(7)"><strong>Ondersoort</strong></th>
                        <th onclick="sortTableAll(8)"><strong>M/V</strong></th>
                        <th onclick="sortTableAll(9)"><strong>Aantal</strong></th>
                        <th onclick="sortTableAll(10)"><strong>Groep</strong></th>
                        <th onclick="sortTableAll(11)"><strong>Jongen</strong></th>
                    </tr>
                </thead>
                <tr>
                @foreach ($registraties as $registratie)
                    <tr>
                        <td> @if ($registratie->gebruiker)<a href="mailto:{{ $registratie->gebruiker->email }}">{{ $registratie->gebruiker->lidnummer }}</a>@endif</td>
                        <td>{{ $registratie->geslachtsnaam }}</td>
                        <td>{{ $registratie->soortnaam }}</td>
                        <td>{{ $registratie->vangplaats }}</td>
                        <td>{{ $registratie->AS }}</td>
                        <td>{{ $registratie->KV }}</td>
                        <td>{{ $registratie->notitie }}</td>
                        <td>{{ $registratie->ondersoort }}</td>
                        <td>{{ $registratie->mv }}</td>
                        <td>{{ $registratie->aantal }}</td>
                        <td>{{ $registratie->groep }}</td>
                        <td>{{ $registratie->jongen }}</td>
                    </tr>
                @endforeach
                {{ $registraties->links() }}
                </tr>
            </table>
        </div>

Thank you SO MUCH in advance.