Как вставить строку таблицы в заданное место?

Question

maiskiykot @maiskiykot

Free coder

JavaScript

Как вставить строку таблицы в заданное место?

Есть таблица, формирующаяся с помощью JS. В ней есть строки как бы верхнего уровня с id "newRow*". В этих строках есть кнопка, по которой создаются дочерние строки с id "row*". Проблема в следующем. Если применять insertBefore element.nextSibling, то без проблем вставляет сразу после строки верхнего уровня. Однако мне необходимо вставлять после - что-то типа lastSibling, однако в этом случае новая строка просто добавляется в конец таблицы, невзирвая на другие строки верхнего уровня. Есть ли какой-то способ заставить дочерние строки вставляться только после своего родителя. Понимаю, что все они лишь теги <tr>, то есть не являются по сути потомками и родителями. Но все же, может кто решал такой вопрос?

<thead>
    <tr>
      <th>Fabric</th>
      <th>Level</th>
      <th>Link</th>
      <th>Description</th>
      <th>Require</th>
      <th>Actions</th>
  </tr></thead>
  <tbody id="table">
    <tr class="hidden" id="row">
      <td></td>
      <td>1</td>      
      <td><input id="imageLink" placeholder="Input"></td>
      <td class="output"><textarea id="description"></textarea></td>
      <td class="output"><input id="require" type="checkbox"></td>
      <td></td>
    </tr>
  <tr class="" id="newRow1">
      <td>1</td>
      <td>1</td>      
      <td><input id="imageLink1" placeholder="Input"></td>
      <td class="output"><textarea id="description1"></textarea></td>
      <td class="output"><input id="require1" type="checkbox"></td>
      <td><a href="javascript:void(0);" onclick="deleteRow(this);">Delete</a>&nbsp;<a href="javascript:void(0);" onclick="insParent(1,1)">Parent</a></td>
    </tr>
<tr id="row2"><td>2</td><td>2</td><td>SL_B</td>
 <td><input name="slOptions[User][NOC M1B]" class="form-control" id="User1" type="text"></td>
 <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>
<tr id="row3"><td>3</td><td>2</td><td>SL_C</td> <td><input name="slOptions[User][NOC M1C]" class="form-control" id="User1" type="text"></td> 
<td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>
 <tr class="" id="newRow4">
      <td>4</td>
      <td>1</td>      
      <td><input id="imageLink4" placeholder="Input"></td>
      <td class="output"><textarea id="description4"></textarea></td>
      <td class="output"><input id="require4" type="checkbox"></td>
      <td><a href="javascript:void(0);" onclick="deleteRow(this);">Delete</a>&nbsp;<a href="javascript:void(0);" onclick="insParent(4,1)">Parent</a></td>
    </tr>
<tr id="row5"><td>5</td><td>2</td><td>SL_D</td> 
<td><input name="slOptions[User][NOC M1D]" class="form-control" id="User1" type="text"></td> <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr></tbody>