如何让日期排序JavaScript脚本适配两个HTML表格？

我用下面的JavaScript代码给HTML表格的日期列排序，代码运行正常，但想把这个排序功能应用到第二个表格上。我试过给第二个表格用不同的ID，也尝试添加新变量，但都没效果，求帮忙。

核心是把排序逻辑改成通用型，摆脱对单个表格和按钮的硬绑定，具体修改步骤如下：

1. 给第二个表格添加专属排序按钮 #

给每个表格配独立的排序按钮，通过自定义属性data-target-table指定按钮要控制的表格ID，示例：

<h2>Bottom Freezer</h2>
<p>
    <button class="sort-season sort-season--start" data-target-table="result">Sort Date</button>
</p>

2. 重构排序函数 #

修改sortByDate函数，让它接收目标表格ID和当前点击的按钮作为参数，不再硬编码固定的表格ID和按钮选择器：

function sortByDate(direction, tableId, button) {
    var tbody = document.querySelector(`#${tableId} tbody`);
    var rows = [].slice.call(tbody.querySelectorAll("tr"));

    if (direction === 'asc') {
        button.classList.remove('sort-season--start');
        button.classList.add('sort-season--end');
        rows.sort(function (a, b) {
            return convertDate(b.cells[2].innerHTML) - convertDate(a.cells[2].innerHTML);
        });
    } else {
        button.classList.add('sort-season--start');
        button.classList.remove('sort-season--end');
        rows.sort(function (a, b) {
            return convertDate(a.cells[2].innerHTML) - convertDate(b.cells[2].innerHTML);
        });
    }

    rows.forEach(function (v) {
        tbody.appendChild(v);
    });
}

3. 批量绑定按钮点击事件 #

给所有.sort-season按钮绑定点击事件，点击时动态获取按钮对应的目标表格，再判断排序方向：

// 给所有排序按钮绑定事件
document.querySelectorAll(".sort-season").forEach(button => {
    button.addEventListener("click", () => {
        const tableId = button.dataset.targetTable;
        if (button.classList.contains('sort-season--start')) {
            button.innerText = "Sort Date";
            sortByDate('asc', tableId, button);
        } else {
            button.innerText = "Sort Date";
            sortByDate('desc', tableId, button);
        }
    });
});

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        table, table table td {
            border: 0px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Top Freezer</h1>
    <p>
        <button class="sort-season sort-season--start" data-target-table="results">Sort Date</button>
    </p>
    <table id="results" width="360" border="1">
        <tbody>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
                <th>StoredDate</th>
            </tr>
            @foreach (var topstock in Model.TopModels)
            {
                <tr>
                    <td>@topstock.Description</td>
                    <td>@topstock.Quantity</td>
                    <td>@topstock.StoredDate</td>
                </tr>
            }
        </tbody>
    </table>

    <h2>Bottom Freezer</h2>
    <p>
        <button class="sort-season sort-season--start" data-target-table="result">Sort Date</button>
    </p>
    <table id="result" width="360" border="1">
        <tbody>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
                <th>StoredDate</th>
            </tr>
            @foreach (var bottomstock in Model.BottomModels)
            {
                <tr>
                    <td>@bottomstock.Description</td>
                    <td>@bottomstock.Quantity</td>
                    <td>@bottomstock.StoredDate</td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

<script>
    function convertDate(d) {
        var p = d.split("/");
        return +(p[2] + p[1] + p[0]);
    }

    function sortByDate(direction, tableId, button) {
        var tbody = document.querySelector(`#${tableId} tbody`);
        var rows = [].slice.call(tbody.querySelectorAll("tr"));

        if (direction === 'asc') {
            button.classList.remove('sort-season--start');
            button.classList.add('sort-season--end');
            rows.sort(function (a, b) {
                return convertDate(b.cells[2].innerHTML) - convertDate(a.cells[2].innerHTML);
            });
        } else {
            button.classList.add('sort-season--start');
            button.classList.remove('sort-season--end');
            rows.sort(function (a, b) {
                return convertDate(a.cells[2].innerHTML) - convertDate(b.cells[2].innerHTML);
            });
        }

        rows.forEach(function (v) {
            tbody.appendChild(v);
        });
    }

    document.querySelectorAll(".sort-season").forEach(button => {
        button.addEventListener("click", () => {
            const tableId = button.dataset.targetTable;
            if (button.classList.contains('sort-season--start')) {
                button.innerText = "Sort Date";
                sortByDate('asc', tableId, button);
            } else {
                button.innerText = "Sort Date";
                sortByDate('desc', tableId, button);
            }
        });
    });
</script>

内容的提问来源于stack exchange，提问作者stan780953