JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar"> <a id="a" href="#">Add a control</a>

    <br /> <a id="b" href="#">Abs</a>
 <a id="c" href="#">Flow</a>

</div>
<div id="stage"></div>

CSS

#stage {
    height: 500px;
    background-color: AliceBlue;
}
.sample {
    width:100px;
    height: 25px;
    color:white;
}

JavaScript

$("body").on("mouseenter", ".sample", init);
$("div#toolbar > a#a").on("click", function () {
    var item = $("<div />").css({
        "background-color": ($("#stage").children().length % 2 == 0) ? "red" : "blue"
    }).text($("#stage").children().length).addClass("sample")
    $("#stage").append(item);
});

$("div#toolbar > a#b").on("click", abs);
$("div#toolbar > a#c").on("click", flow);


function init() {
    $(this).draggable({containment:"#stage"});
}

function setSortable(){
    $("#stage").sortable();
}

function flow() {
    $(".sample").mouseenter();
    $("body").off("mouseenter", init);
    var _c = $("#stage > .sample"),
        _sort = $("#stage > .sample").sort(function (a, b) {
            var l = $(a).position(), r = $(b).position();
            return l.top > r.top;
            
            /*
            if (l.top > r.top) {
                console.log("a.top > b.top")
                return true;
            }
            else if(l.top == r.top) {
                console.log("tops are equal");
                if (l.left > r.left) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }*/
        });
    console.log("Unsorted: ", _c);
    console.log("Sorted: ", _sort);
    _c = _c.toArray();
    for (var i = 0; i < _c.length; i++) {
        var item = _c[i];
        var sl = _sort[i];
        var css = {};
        css["left"] = $(sl).position().left + "px";
        css["top"] = $(sl).position().top + "px";
        css["display"] = $(sl).css("display");
        css["position"] = "absolute";
        
        $(sl).css({
            left: "",
            top: "",
            display: "inline-block",
            position: ""
        });
        if (!$(sl).data("css"))
            $(sl).data("css", css);

        if ($(sl).data("draggable"))
            $(sl).draggable("destroy");
        
        if (item != sl){
            var...