Sort table with heading with jQuery-CodePudding

I have created 11 tables with a table name using a div. I am sorting the number rows of all tables.

It works but I also want that the table name should be sorted according to the number sorting. If anyone knows how to do this please help. I have given the HTML and jQuery code here. Thanks in advance.

$('#alphBnt').on('click', function() {
  var sorting = $(".box").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>

<div id="container">
  <div class="head">Table 1</div>
  <table border=2px class="box">
    <tr>
      <td class="name">mui</td>
      <td class="number">4512</h2>
      </td>
    </tr>
  </table>

  <div class="head">Table 2</div>
  <table border=2px class="box">
    <tr>
      <td class="name">oinecellars</td>
      <td class="number">566</td>
    </tr>
  </table>

  <div class="head">Table 3</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">34566</td>
    </tr>
  </table>

  <div class="head">Table 4</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">1</td>
    </tr>
  </table>

  <div class="head">Table 5</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">1666</td>
    </tr>
  </table>

  <div class="head">Table 6</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">143</td>
    </tr>
  </table>

  <div class="head">Table 7</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">90</td>
    </tr>
  </table>

  <div class="head">Table 8</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">21</td>
    </tr>
  </table>

  <div class="head">Table 9</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">34</td>
    </tr>
  </table>

  <div class="head">Table 10</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">16</td>
    </tr>
  </table>

  <div class="head">Table 11</div>
  <table border=2px class="box">
    <tr>
      <td class="name">zacchus </td>
      <td class="number">9000</td>
    </tr>
  </table>
</div>

CodePudding user response：

Try wrapping the table and heading inside a div

$('#alphBnt').on('click', function() {
  var sorting = $(".box-panel").sort((a, b) => $(a).find(".number").text() - $(b).find(".number").text()).appendTo("#container")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>

<div id="container">
  <div class="box-panel">
    <div class="head">Table 1</div>
    <table border=2px class="box">
      <tr>
        <td class="name">mui</td>
        <td class="number">4512</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 2</div>
    <table border=2px class="box">
      <tr>
        <td class="name">oinecellars</td>
        <td class="number">566</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 3</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">34566</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 4</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">1</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 5</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">1666</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 6</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">143</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 7</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">90</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 8</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">21</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 9</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">34</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 10</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">16</td>
      </tr>
    </table>
  </div>
  <div class="box-panel">
    <div class="head">Table 11</div>
    <table border=2px class="box">
      <tr>
        <td class="name">zacchus </td>
        <td class="number">9000</td>
      </tr>
    </table>
  </div>
</div>