JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clist">
    <div data-uid=1000 data-sid='1'>1</div>
    <div data-uid=1001 data-sid='4'>4</div>
    <div data-uid=1002 data-sid='3'>3</div>
    <div data-uid=1003 data-sid=1>1</div>
    <div data-uid=1004 data-sid=4>4</div>
    <div data-uid=1005 data-sid=2>2</div>
    <div data-uid=1006 data-sid=1>1</div>
</div>
<input type="textbox"  id="uid"/>
<input type="textbox"  id="sid"/>
<button id="change" >Change</button>

CSS

span {
   background-color: red;
   display: block;
   width: 100px;
   height: 100px    
}

JavaScript

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

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

contacts.append(cont);
}
    sortContacts();
$("#change").click(function(){
var contacts = $('div.clist'), cont = contacts.children('div');
var uid=$("#uid").val();
var sid=$("#sid").val();
    
    
    contacts.children("div[data-uid='"+uid+"']").attr("data-sid",sid);
    sortContacts();

})