Сортировка нескольких таблиц с одной и той же функцией с помощью Javascript

Я пытаюсь отсортировать несколько таблиц, используя одну и ту же функцию в Javascript. Все таблицы будут одинаковыми, и я просто хочу, чтобы при нажатии на заголовок таблицы он сортировался в алфавитном или числовом порядке (от большего к меньшему), а когда вы снова нажимаете на заголовок, он будет сортировать ряд в обратном направлении (например, от низшего к высшему).

Я использовал этот код из школ W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc

Он отлично работает для сортировки только одной таблицы. Однако это не работает, когда я меняю «GetElementById» на «GetElementsByClassName».

Ниже приведен мой измененный HTML-код: не обращайте внимания на содержимое NFL, так как это просто данные, которые я использую для проверки содержимого таблицы)

<table border="1" class="supTable">
            <tr>
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Atlanta Falcons</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Dallas Cowboys</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Houston Texans</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Green Bay Packers</td>
                <td>3</td>
            </tr>
            <tr>
                <td>New England Patriots</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Oakland Raiders</td>
                <td>2</td>
            </tr>
            <tr>
                <td>New York Giants</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Miami Dolphins</td>
                <td>1</td>
            </tr>
        </table>
    </div>
    <div id="supAfc">
        <table border="1" class="supTable">
            <tr> 
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Houston Texans</td>
                <td>0</td>
            </tr>
            <tr>
                <td>New England Patriots</td>
                <td>5</td>
            </tr>
            <tr>
                <td>Oakland Raiders</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Miami Dolphins</td>
                <td>1</td>
            </tr>
        </table>
    </div>
    <div id="supNfc">
        <table border="1" class="supTable">
            <tr>
                <th onclick="sortTable(0)"> Team Name</th>
                <th onclick="sortTable(1)">Super Bowls</th>
            </tr>
            <tr>
                <td>Atlanta Falcons</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Dallas Cowboys</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Green Bay Packers</td>
                <td>3</td>
            </tr>
            <tr>
                <td>New York Giants</td>
                <td>2</td>
            </tr>
        </table>
    </div>

А это код Javascript:

function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

table = document.getElementsByClassName("supTable");
switching = true;
dir = "asc"; 
while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        x = rows[i].getElementsByTagName("TD")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch= true;
            break;
            }
        } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                shouldSwitch= true;
                break;
            }
        }
    }
    if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount ++;      
    } else {
        if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
        }
    }
}
}

Я думаю, что знаю, почему селектор класса не работает, и буду рад попробовать другую функцию, если она даст мне результаты. Может кто-нибудь помочь мне с использованием Javascript и, в идеале, не jQuery, так как в данный момент я не знаком с jQuery.

Я просто хочу иметь возможность использовать одну и ту же функцию в нескольких таблицах, чтобы мне не приходилось много раз копировать и вставлять один и тот же код и каждый раз менять селектор идентификаторов.

РЕДАКТИРОВАТЬ. Несколько человек упомянули другой вопрос о селекторах запросов. Как мне использовать селекторы запросов или классов для правильного вызова/решения моей проблемы?