jQuery prepend tr after tr heading - html

Question

I have the following HTML table.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
London, Paris and Rome have a class named show-on-top. As the name suggests I want to move all tr with show-on-top on top of the table. I can do that with the following code.
$("#table tbody").prepend($('.show-on-top'));
But the problem is that London, Paris and Rome are shown before <th> (the "City" heading). Of course I want to place show-on-top rows on top of the table but after heading (first row). So I came up with the following idea.
$("#table tbody tr:eq(1)").prepend($('.show-on-top'));
I'm almost there. All my show-on-top are placed after heading but they're nested inside a tr like follows.
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
</tbody>
I can't understand how the heck all my rows are nested inside a tr. I'm tried with hundreds of combinations of parent, after, prepend, append with no success.
Bonus question. show-on-top rows have data-order attribute that represents the order I want to sort th rows in question (Paris > Rome > London). I used sort.data('order') but nothing happens. I can't even see anything in console.log().
Thank you for your time.

Answer 1

One thing you can do is move the heading rows out of <tbody> into <thead>
$("#table tbody").prepend($('.show-on-top'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>
Another solution is to use .after() to put the rows after the last row containing th.
$("#table tbody tr:has(th):last").after($(".show-on-top"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>

Answer 2

You could use insertAfter() and :first selector
$(".show-on-top").insertAfter('#table tbody tr:first');
.show-on-top{ color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<th>City</th>
</tr>
<tr>
<td>Madrid</td>
</tr>
<tr class="show-on-top">
<td data-order="3">London</td>
</tr>
<tr>
<td>Berlin</td>
</tr>
<tr>
<td data-order="1">Paris</td>
</tr>
<tr class="show-on-top">
<td data-order="2">Rome</td>
</tr>
</tbody>
</table>