How to sort multiple tables with jQuery-CodePudding

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>

CodePudding user response：

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>