JSFiddle - React, Tailwind, and code Playground

HTML

<div>
 Empty table with specified tbody: works!
</div>
<table id = "parent1">
  <tbody></tbody>
</table>

<div>
 Empty table without tbody: no good!<br/>
The second TR insertion is added to the table contained within the first TR.
</div>
<table id = "parent2">
</table>

<div>
  Table without tbody, but intitial row: works!
</div>
<table id = "parent3">
   <tr>
      <td>
         <table><tr><td>initial child
         </td></tr></table>   
     </td>
   </tr>
</table>

<table id = "container">
    <tr id = "c1">
      <td>
         <table><tr><td>child
         </td></tr></table>   
     </td>
   </tr>
</table>

CSS

table{
  border:solid 1px gray;
 }
 div{
   margin:15px 0 5px 0;
 }
#container{
 display:none;
}

JavaScript

var clone = $("#c1").clone().attr("id","");
$("#parent1").append(clone);

var clone = $("#c1").clone().attr("id","");
$("#parent1").append(clone);

var clone = $("#c1").clone().attr("id","");
$("#parent2").append(clone);

var clone = $("#c1").clone().attr("id","");
$("#parent2").append(clone);

var clone = $("#c1").clone().attr("id","");
$("#parent3").append(clone);

var clone = $("#c1").clone().attr("id","");
$("#parent3").append(clone);