thislegion,
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
<style>
.tablinks,
.tablinks2 {
font-size: 12px;
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif
}
.tablinks:hover,
.tablinks2:hover {
cursor: pointer;
color: white;
background-color: black;
}
tr .tablinks {
background-color: #C8C8C8
}
.leftable {
width: 20%;
}
td.tablinks.hide {
opacity: 0;
}
</style>
</head>
<body>
<table id="mytable" class="leftable">
<thead>
<tr>
<th>
<div class="ui fluid icon input">
<input type="text" id="search" placeholder="Поиск1">
<i class="search icon"></i>
</div>
</th>
<th>
<div class="ui fluid icon input">
<input type="text" id="search-right" placeholder="Поиск2">
<i class="search icon"></i>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tablinks">Яблоко</td>
<td class="tablinks2">Яблоко</td>
</tr>
<tr>
<td class="tablinks">Банан</td>
<td class="tablinks2">Банан</td>
</tr>
<tr>
<td class="tablinks">Апельсин</td>
<td class="tablinks2">Апельсин</td>
</tr>
<tr>
<td class="tablinks">Киви</td>
<td class="tablinks2">Киви</td>
</tr>
<tr>
<td class="tablinks">Мандарин</td>
<td class="tablinks2">Мандарин</td>
</tr>
<tr>
<td class="tablinks">Арбуз</td>
<td class="tablinks2">Арбуз</td>
</tr>
<tr>
<td class="tablinks">Груша</td>
<td class="tablinks2">Груша</td>
</tr>
</tbody>
</table>
<script>
$(function() {
const listTd = $("#mytable tbody tr .tablinks").get();
const collator = new Intl.Collator(["en", "ru"], {
numeric: true
});
$("#search").keyup(function() {
const val = this.value.toLowerCase().trim();
const arrTd = listTd.slice(0).sort(function(a, b) {
const aTxt = a.textContent.toLowerCase();
const bTxt = b.textContent.toLowerCase();
const aI = aTxt.indexOf(val);
const bI = bTxt.indexOf(val);
a.classList.toggle('hide', aI == -1);
b.classList.toggle('hide', bI == -1);
if (!val) return 0;
if (aI == -1 && bI == -1) return collator.compare(aTxt, bTxt);
if (aI == -1) return 1;
if (bI == -1) return -1;
return aI - bI || collator.compare(aTxt, bTxt);
});
$("#mytable tbody tr").each(function(i, tr) {
tr.prepend(arrTd[i])
})
});
});
</script>
</body>
</html>