JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id="searchh" width="100%" border="0" cellpadding="10px" cellspacing="1px">
    <tr>
    <th>fname</th>
    <th>mname</th>
    <th>lname</th>
    <th id="price">price</th>
</tr>
<tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
</tr>
    <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr><tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
</tr><tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
</table>
<button id="testing" >Click here to sort</button>

CSS

td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }

JavaScript

$('#testing').on('click', function () {
                    $( "th#price" ).trigger( "click" );//
                });
                
                

                $(document).on("click","th",function () {
                    var table = $(this).parents('table').eq(0)
                    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
                    this.asc = !this.asc
                    if (!this.asc) {
                        rows = rows.reverse()
                    }
                    for (var i = 0; i < rows.length; i++) {
                        table.append(rows[i])
                    }
                })

                function comparer(index) {
                    return function (a, b) {
                        var valA = getCellValue(a, index), valB = getCellValue(b, index)
                        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
                    }
                }
                function getCellValue(row, index) {
                    return $(row).children('td').eq(index).html()
                }