asp.net and jquery ui sortable, mantain order of elements after button click

in the header I have this javascript code:

<script>
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
 function checkOrd() {
     var items = $('#sortable li').map(function () {
         return $.trim($(this).attr('id'));
     }).get();
     
     document.getElementById("rightOrder").value = items;
}
</script>

and this markup:

<form id="form1" runat="server">
    <div>
        <div class="mt-5">
            <div id="d" runat="server"></div>
        </div>
        <asp:HiddenField runat="server" ID="rightOrder" />
        <button onclick="sortItems();">Sort lists</button>
        <button onclick="checkOrd();" runat="server" id="btnCheckOrder" onserverclick="btnCheckOrder_ServerClick">Check order</button>

    </div>
</form>

This is the markup I add by code behind:

<ul id="sortable" class="sortable-list">
 <li id="3" class="item" draggable="true">
  <div class="details">
   <img src="images/img-1.jpg" />
   <span>Bello</span>
  </div>
  <i class="uil uil-draggabledots"></i>
 </li>
 ...
</ul>

And this is my button click:

protected void btnCheckOrder_ServerClick(object sender, EventArgs e) /*versione iniziale*/
 {
     string[] order = rightOrder.Value.Split(',');
     Int16 i = 0;
     foreach (string ordinalID in order)
     {
         ++i;

         HtmlGenericControl ul = (HtmlGenericControl)d.FindControl("sortable");
         HtmlGenericControl listItem = (HtmlGenericControl)ul.FindControl(ordinalID);
         listItem.Attributes.Remove("dragging");
         if (ordinalID != i.ToString()){listItem.Attributes.Add("class", "item bg-danger");}
         else{listItem.Attributes.Add("class", "item bg-success");}
         
     }

The result:

When I change the order of the elements (for example switching the first two) I can get the right order in code behind and change the background color of elements in the correct position to green, but right after that the list order is restored as it was initially (I assume there is a postBack or page refresh). How could I avoid this? After the button is clicked I want to check the correct position of elements and mantain their order. Thanks!