JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="parent">
        <td>Apple</td>
        <td>Orange</td>
        <td>Banana</td>
    </tr>
    <tr class="child">
        <td>Apple 1</td>
        <td>Orange 1</td>
        <td>Banana 1</td>
    </tr>
    <tr class="child">
        <td>Apple 2</td>
        <td>Orange 2</td>
        <td>Banana 2</td>
    </tr>
    <tr class="parent">
        <td>Tablex</td>
        <td>cHAIR</td>
        <td>Mouse</td>
    </tr>
    <tr class="child">
        <td>Table 1</td>
        <td>cHAIR 1</td>
        <td>Mouse 1</td>
    </tr>
    <tr class="child">
        <td>Table 2</td>
        <td>cHAIR 2</td>
        <td>Mouse 2</td>
    </tr>
</table> 
<hr/>
<div><i>Sort by parent's first td content length</i></div>
<button id="sort">Click Sort</button>

JavaScript

jQuery.fn.sortElements = (function(){

        var sort = [].sort;
            
        return function(comparator, getSortable) {
            var allElements=this;
            getSortable = getSortable || function(){return this;};

            var placements = this.map(function(){

                var sortElement = getSortable.call(this),
                    parentNode = sortElement.parentNode,

                    // Since the element itself will change position, we have
                    // to have some way of storing its original position in
                    // the DOM. The easiest way is to have a 'flag' node:
                    nextSibling = parentNode.insertBefore(
                        document.createTextNode(''),
                        sortElement.nextSibling
                    );

                return function() {

                    if (parentNode === this) {
                        throw new Error(
                            "You can't sort elements if any one is a descendant of another."
                        );
                    }

                    // Insert before flag:
                    parentNode.insertBefore(this, nextSibling);
                    // Remove flag:
                    parentNode.removeChild(nextSibling);

                };

            });

            return sort.call(this, comparator).each(function(i){
                placements[i].call(getSortable.call(this));
            });

        };

    })();
$("#sort").click(function(){
    //sort logic
    $(".parent").each(function(i,node){
        var child=$(this).nextUntil('.parent');
        $(this).data("child-node",child);   
    }).sortElements(function(a,b){
         var lengthb= $(b).children("td").first().text().length 
         var lengtha= $(a).children("td").first().text().length
         return lengthb-lengtha;
    }).each(function(i,node){
         var child=$(this).data("child-node");
         $(this).after(child);
    });
    
})