I want to sort all values but jquery sorts only three values I want multiple table sort on tag h2 but when i sort it only sort first 3 values but i want all values
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort(function(a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(sorting)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>You need to use - :
$('#alphBnt').on('click', function() {
var sorting = $(".box").sort((a, b) => $(a).find("h2").text() - $(b).find("h2").text()).appendTo("#container")
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
<table border=2px class="box">
<tr>
<td class="name">
<h1>mui</h1>
</td>
<td class="number">
<h2>4512</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>oinecellars</h1>
</td>
<td class="number">
<h2>566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>34566</h2>
</td>
</tr>
</table>
<table border=2px class="box">
<tr>
<td class="name">
<h1>zacchus </h1>
</td>
<td class="number">
<h2>1</h2>
</td>
</tr>
</table>
</div>