Sort table with heading with jQuery

Question

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>

Answer 1

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>