Jquery why sorting table without first row

Question

This code sorting table without first row. I think because I using thead outside from other table but what should I do.

html

<div class="clusterize">
                  <table class="table mb-0">
                    <thead class="thead-dark">
                      <tr>
                        <th>s</th>
                        <th>ID </th>
                        <th>f </th>
                        <th>Min </th>
                        <th>Max </th>
                        <th>Fiyat </th>
                        <th>D </th>
                        <th>R </th>
                        <th>category</th>
                      </tr>
                    </thead>
                  </table>
                  <div id="scrollArea" class="clusterize-scroll">
                    <table class="table border-top-0 mb-0">
                      <tbody id="contentArea" class="clusterize-content">
                              this data coming from ajax. First row not sorting with jquery code
                      </tbody>
                    </table>
                  </div>
                </div>

jquery

$('th').click(function(){
    var table = $('#contentArea').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.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

This code sorting table without first row. I think because I using thead outside from other table but what should I do.