JSFiddle - React, Tailwind, and code Playground

HTML

<table name="mytable" id="mytable">
    <thead>
        <tr>
            <th>Names</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ball</td>
        </tr>
        <tr>
            <td>Apple</td>
        </tr>
        <tr>
            <td>Cat</td>
        </tr>
    </tbody>
</table>
<button class="sort">sort</button>

JavaScript

$('.sort').click(function (e) {
    var $sort = this;
    var $table = $('#mytable');
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if ($($sort).hasClass('asc')) {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
    e.preventDefault();
});