As I said on append it works as it should the hidden table right below the main row <tr> but on sort(using list.js to sort) the main tables table row are getting re-arranged leaving the hidden tr to either be on top or bottom of the whole main table.
in the marked image you can see 2 tr are above after sorting
in the marked image you can see 2 tr are above after sorting
const itmName = { itemID : "ID1", itemName: "NAME1", itemCategory : "Category1" };
$('#raEditedItemSection .list').append(`<tr data-toggle="collapse" data-target="#demo${itmName.itemID}" class="accordion-toggle collapsed ra-edited-items-row${itmName.itemID}" aria-expanded="false">
<td class="ra-edited-item ra-restaitem" style="flex-basis: 50%;">${itmName.itemName}</td>
<td class="ra-edited-item-id ra-restaitem-id" style="flex-basis: 15%;">${itmName.itemID}</td>
<td class="ra-edited-category ra-category" style="flex-basis: 35%;">${itmName.itemCategory}</td>
<td class="ra-affected-prod-list" style="flex-basis: 35%;">
<span>
3 Affected products <i class="icon icon-chevron-down" style=" font-size: 18px; font-weight: bold; vertical-align: middle; margin-left: 10px; float: right; text-align: center;"/>
</span>
</td>
</tr>
<tr style="padding: 0rem !important;">
<td colspan="12" class="hiddenRow" style=" padding: 0 !important;">
<div class="accordian-body collapse" id="demo${itmName.itemID}" style="">
<table class="affectPodTable table-striped">
<thead class=" affected-prod-table">
<tr class="affectedProductsHead">
<th>Affected Products</th>
<th>ID</th>
<th>Category</th>
</tr>
</thead>
<tbody class="dynamicProdAppend">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#demo10">
<td class="ra-edited-item ra-restaitem" style="width: 40%;">B.L.T Footlong Regular Sub</td>
<td class="ra-edited-item-id ra-restaitem-id" style="flex-basis: 15%;width: 15%;">23</td>
<td class="ra-edited-category ra-category" style="flex-basis: 35%;">Classic Sandwiches</td>
</tr>
<tr data-toggle="collapse" class="accordion-toggle" data-target="#demo10">
<td class="ra-edited-item ra-restaitem" style="width: 40%;">Spicy Italian Flatizza Flatizza</td>
<td class="ra-edited-item-id ra-restaitem-id" style="flex-basis: 15%;width: 15%;">1506</td>
<td class="ra-edited-category ra-category" style="flex-basis: 35%;">Personal Pizza</td>
</tr>
<tr data-toggle="collapse" class="accordion-toggle" data-target="#demo10">
<td class="ra-edited-item ra-restaitem" style="width: 40%;">Personal Cheese Pizza Personal Pizza</td>
<td class="ra-edited-item-id ra-restaitem-id" style="flex-basis: 15%;width: 15%;">1510</td>
<td class="ra-edited-category ra-category" style="flex-basis: 35%;">Personal Pizza</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>`);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="raEditedItemSection">
<tbody class="list"></tbody>
</table>