JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Paragraphs (green) nested in divs (yellow)</h1><br/>

<button id="a">Refresh</button>
<button id="b">James' sort</button>
<button id="c">Avi's sort</button><br/>

<div id="contain"></div>

CSS

div div { background: yellow; border: 1px solid black; padding: 5px; margin-bottom: 7px;  }
p { background: green; border: 1px solid black; padding: 5px; color: #FFF; font-size: 1.3em; }

code { font-family: courier, monospace; }

JavaScript

jQuery.fn.sort1 = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        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));
        });
 
    };
 
})();

jQuery.fn.sort2 = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        var last = null;
        return sort.call(this, comparator).each(function(i){
            // at this point the array is sorted, so we can just detach each one from wherever it is, and add it after the last
            var node = getSortable && typeof(getSortable) === "function" ? getSortable.call(this) : $(this);
            var parent = node.parent();
            if (last) {
                last.after(node);
            } else {
                parent.prepend(node);
            }
            last = node;
        });
 
 
    };
 
})();

var n =...