JSFiddle - React, Tailwind, and code Playground

HTML

<table id="row">
    <thead>
        <tr>
            <th>Foo!</th>
            <th>Barrr</th>
            <th>Moar!</th>
            <th>End of all things</th>
        </tr>
    </thead>
       
</table>

CSS

th, td{
    width: 110px;
}

.odd {
    background-color: red;
}

.event {
    border: 1px solid #000;
}

.swGroupLink {
    background-color: yellow;
}

.top {
    top: 0px;
    background-color: blue;
    width: 200px;
}

JavaScript

function prepareTable() {
    var groupIndex = 0;
    $("#row tbody tr").each(function(index) {
        var $self = $(this);
        setTimeout(function(){ 
    // each row gets a unique id
    // remove default css styles for table rows
    // read out hidden value, that stores if row is a group
    var group = $self.attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
    // if it is a group, add special styles to row and remember row index
    if (group == 'true') {
        groupIndex = index;
        $self.addClass('odd').find("td:first")
            .mouseenter(function() {
                $(this).parent().addClass("swGroupLink");
            })
            .mouseleave(function() {
                $(this).parent().removeClass("swGroupLink");
        });
    } else {
        // make all following rows to children of the previous group found
        $self.addClass('even child-of-node-' + groupIndex);
    }   
    }, 25);
    });
}

function prepareTableNEW() {
   var groupIndex = 0;
   var $mytable = $('#row'),
       $parent  = $mytable.parent();

   $mytable = $mytable.detach();

   $mytable.find('tbody').find('tr').each(function(index) {       
      var $this = $(this);       
      var group = $this.attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
// if it is a group, add special styles to row and remember row index
   if (group == 'true') {
       groupIndex = index;
       $this.addClass('odd').find("td:first")
           .mouseenter(function() {
               $(this).parent().addClass("swGroupLink");
           })
           .mouseleave(function() {
               $(this).parent().removeClass("swGroupLink");
       });
   } else {
       // make all following rows to children of the previous group found
       $this.addClass('even child-of-node-' + groupIndex);
   }   
   });

   $parent.append($mytable);
}




$(function(){
   var loop   = 500,
       $table = $('#row');
    
    //...