JQuery tablesorter is not having any effect, what have I done wrong?

I'm very new to jQuery and am trying to use Tablesorter, however it has no effect on my table (styling doesn't change to the tablesorter css, and there is no sorting functionality).

Here is my html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FPLHelper</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.min.css" rel="stylesheet" />
    <script src="js/PlayerList.js"></script>
    <script>
        $(document).ready(function() {
            $("#table-main").tablesorter({ sortList: [[0,0], [1,0]] });
        });
    </script>
</head>

<body onload="getPlayerList()">

<div class="navigation">
    <h1 class="main-heading"><span>FPL</span>Helper</h1>
    <a href="main.html">Home</a>
    <a href="account.html">Account</a>
    <a class="open" href="login.html">Login</a>
    <a href="register.html">Register</a>
</div>

<section>
    <input type="text" id="playerSearch" onkeyup="tableSearch()" placeholder="Search for a player...">
    <div class="tableFixHead">
        <table id="table-main" class="tablesorter" cellpadding="0" cellspacing="0" border="0">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Second Name</th>
                <th>Goals Scored</th>
                <th>Goals Assisted</th>
                <th>FPL Points</th>
                <th>Minutes Played</th>
                <th>Goals Against</th>
                <th>Creativity Score</th>
                <th>Influence Score</th>
                <th>Threat Score</th>
                <th>Bonus Points</th>
                <th>Total BPS</th>
                <th>ICT Score</th>
                <th>Clean Sheets</th>
                <th>Red Cards</th>
                <th>Yellow Cards</th>
                <th>Selected By</th>
                <th>Cost</th>
                <th>Position</th>
            </tr>
            </thead>
            <tbody id="table-data">
            </tbody>
        </table>
    </div>
</section>

</body>
</html>

And here is the js to populate the table if that would be helpful to see as well (this is in the PlayerList.js):

function getPlayerList() {
    console.log("Invoked getPlayerList()");

    const url = "/player/list";
    fetch(url, {
        method: "GET",
    }).then(response => {
        return response.json();                 //now return that promise to JSON
    }).then(response => {
        if (response.hasOwnProperty("Error")) {
            alert(JSON.stringify(response));// if it does, convert JSON object to string and alert
            console.log(response);
        } else {
            console.log(response);
            formatPlayerList(response);
        }
    });

}
function formatPlayerList(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $("<tr/>");
        tr.append("<td>"+ data[i].FirstName + "</a></td>");
        tr.append("<td>" + data[i].SecondName + "</td>");
        tr.append("<td>" + data[i].Goals + "</td>");
        tr.append("<td>" + data[i].Assists + "</td>");
        tr.append("<td>" + data[i].FPLPoints + "</td>");
        tr.append("<td>" + data[i].MinsPlayed + "</td>");
        tr.append("<td>" + data[i].GoalsAgainst + "</td>");
        tr.append("<td>" + data[i].Creativity + "</td>");
        tr.append("<td>" + data[i].Influence + "</td>");
        tr.append("<td>" + data[i].Threat + "</td>");
        tr.append("<td>" + data[i].BonusPoints + "</td>");
        tr.append("<td>" + data[i].BPSTotal + "</td>");
        tr.append("<td>" + data[i].ICTScore + "</td>");
        tr.append("<td>" + data[i].CleanSheets + "</td>");
        tr.append("<td>" + data[i].RedCards + "</td>");
        tr.append("<td>" + data[i].YellowCards + "</td>");
        tr.append("<td>" + data[i].SelectedBy + "</td>");
        tr.append("<td>" + data[i].BuyCost + "</td>");
        tr.append("<td>" + data[i].PlayingPos + "</td>");
        $('#table-main').append(tr);
    }
    isClicked();
}

Sorry if this is something really obvious, and if you need to see any more of my code then just ask. Thanks.

Edit: I have tried without using any of my css at all to see if that was doing anything, but that didn't work either. As per what I answered below, there are no errors etc. in the console.