JSFiddle - React, Tailwind, and code Playground
HTML
<table class="items table table-striped table-bordered table-condensed">
<thead>
<tr>
<th id="operations_c0" class="checkbox-column">
<input type="checkbox" id="operations_c0_all" name="operations_c0_all" value="1" class="select-on-check-all">
</th>
<th id="operations_c1">Permissions</th>
</tr>
</thead>
<tbody>
<tr class="extra">
<td colspan="2" class="extrarow"><strong>Auth :: Permission</strong>
</td>
</tr>
<tr class="odd">
<td class="checkbox-column">
<input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_0" value="oAuthOperationCreate" class="select-on-check">
</td>
<td>Create</td>
</tr>
<tr class="even">
<td class="checkbox-column">
<input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_1" value="oAuthOperationRead" class="select-on-check">
</td>
<td>Read</td>
</tr>
<tr class="odd">
<td class="checkbox-column">
<input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_2" value="oAuthOperationUpdate" class="select-on-check">
</td>
<td>Update</td>
</tr>
<tr class="even">
<td class="checkbox-column">
<input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_3" value="oAuthOperationDelete" class="select-on-check">
</td>
<td>Delete</td>
</tr>
<tr class="odd">
<td class="checkbox-column">
<input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_4" value="oAuthOperationList" class="select-on-check">
</td>
<td>List</td>
</tr>
<tr class="even">
<td class="checkbox-column">
<input...
JavaScript
$(function () {
var columns = [];
$('tr.extra').each(function (i) {
var curr_col = $(this);
var next_col = $('tr.extra').eq(i+1);
var column = curr_col.nextUntil(next_col);
columns[i] = column;
});
columns.reverse();
var len = columns.length;
for (i = len-2; i >= 0; i--) {
columns[i].each( function (index, value){
var tds = $(this).children('td');
columns[len-1].eq(index).append(tds);
$(this).remove();
});
}
});