JSFiddle - React, Tailwind, and code Playground

HTML

<table id="fruits">
    <thead>
        <tr>
            <th class="sortable asc">ID</th>
            <th class="sortable">Name</th>
            <th class="sortable">Rank</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>Banana</td>
            <td>15</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Pear</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Orange</td>
            <td>6</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Apple</td>
            <td>14</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mango</td>
            <td>99</td>
        </tr>
    </tbody>
</table>

CSS

#fruits th, #fruits td{
    border:solid 1px #000;
    padding:.25em;
}
#fruits th{
    font-weight:bold;
    cursor:pointer;
}

#fruits th.asc:after{
    content:'Asc';
    display:inline-block;
    padding:0 .5em;
    color:green;
}
#fruits th.desc:after{
    content:'Desc';
    display:inline-block;
    padding:0 .5em;
    color:blue;
}

JavaScript

$(".sortable").click(function(){
    var o = $(this).hasClass('asc') ? 'desc' : 'asc';
    $('.sortable').removeClass('asc').removeClass('desc');
    $(this).addClass(o);
    
    var colIndex = $(this).prevAll().length;
    var tbod = $(this).closest("table").find("tbody");
    var rows = tbod.find("tr");
    
    rows.sort(function(a,b){
        var A = $(a).find("td").eq(colIndex).text();
        var B = $(b).find("td").eq(colIndex).text();

        if (!isNaN(A)) A = Number(A);
        if (!isNaN(B)) B = Number(B);
        
        return o == 'asc' ? A > B : B > A;
    });
    
    $.each(rows, function(index, ele){
        tbod.append(ele);
    });
});