JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

Enter sort value (1-3): <input id="sortColumn" type="text" maxlength="1" size="2" value="1"> <button id="sort">Sort</button> <span id="msg"> Enter a value of 1 to 3</span><br>
<div id="container">
    <div data-sortunit="1" data-sort1="40" data-sort2="156" data-sort3="1"
    data-sort4="1317620220" class="item">aaa
    </div>
    
    <div data-sortunit="2" data-sort1="30" data-sort2="116" data-sort3="5"
    data-sort4="1317620220" class="item">bbb
    </div>
    
    <div data-sortunit="3" data-sort1="10" data-sort2="157" data-sort3="2"
    data-sort4="1317620220" class="item">ccc
    </div>
</div>

CSS

#msg {color: red; display: none;}

JavaScript

function sortByDataItem(containerID, dataNum) {
    var values = [];
    $("#" + containerID + " .item").each(function(index) {
        var item = {};
        item.index = index;
        item.obj = this;
        item.value = $(this).data("sort" + dataNum);
        values.push(item);
    });
    values.sort(function(a, b) {return(b.value - a.value);});
    var container = $("#" + containerID);
    for (var i = 0; i < values.length; i++) {
        var self = $(values[i].obj);
        self.detach();
        container.prepend(self);
    }
    return;
}


$("#sort").click(function() {
    var sortValue = $("#sortColumn").val();
    if (sortValue) {
        sortValue = parseInt(sortValue, 10);
        if (sortValue && sortValue > 0 && sortValue <= 3) {
            sortByDataItem("container", sortValue);
            return;
        }
    }
    $("#msg").show(1).delay(5000).fadeOut('slow');
});