JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clist">
    <div data-sid=1>1</div>
    <div data-sid=2>2</div>
    <div data-uid="1024"  data-sid="2">2</div>
    <div data-sid=1>1</div>
    <div data-sid=2>2</div>
    <div data-sid=2>2</div>
    <div data-sid=1>1</div>
</div>
<button id="addc">Add</button>
<button id="change">Change</button>

JavaScript

function sortContacts() {
    var contacts = $('div.clist'), cont = contacts.children('div');

    cont.detach().sort(function(a, b) {
        var astts = parseInt($(a).data('sid'), 10);
        var bstts =  parseInt($(b).data('sid'), 10);
        //return astts - bstts;
        return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
    });
    contacts.append(cont);

}


sortContacts();

$("#addc").bind("click", function(){
$(".clist").append( "<div data-sid=1>1</div>");
    
sortContacts();
});


$("#change").bind("click", function(){
$(".clist").children("div[data-uid = 1024]").attr("data-sid",1);
    
sortContacts();
});