JSFiddle - React, Tailwind, and code Playground

HTML

<table>
     <thead>
      <tr>
          <th>cabecera 1</th><th>cabecera 2</th><th>cabecera 3</th><th>cabecera 4</th>
      </tr>
     </thead>
    <tbody>
    <tr id="uno">
        <td>campo1</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    <tr>
        <td>campo2</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    <tr id="dos">
        <td>campo3</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    <tr>
         <td>campo4</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    <tr id="tres">
         <td>campo5</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    <tr>
          <td>campo6</td><td>campo</td><td>campo</td><td>campo</td>
    </tr>
    </tbody>
    </table>
<div id="tablas">  
</div>

JavaScript

$tbody = $("table tbody").clone();
$trx = $($tbody).find("tr:first-child");
 while ($trx.is("tr")){
     var $table = $('<table><tbody></tbody></table>');
     $tr = $trx;
     $trx = $trx.next();
     $table.append($tr);
      while ($trx.is("tr") && typeof $trx.attr('id') == "undefined"){
         $tr = $trx;
          $trx = $trx.next();
         $table.append($tr);
      }
    $("#tablas").append($table);
  }