JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        
        <meta charset="utf-8">
        <title>jQuery UI Sortable - Display as grid</title>
        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
        <script src="http://jqueryui.com/jquery-1.5.1.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
        
        <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
        <script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
        <style>
            #sortable { list-style-type: none; margin: 0; padding: 0; }
            #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
        </style>
    </head>
    <body>
        
        
        <div class="demo" style="width:444px">
            
            <ul id="sortable">
                <li itemID=3 id='3' class="ui-state-default">3<button>delete</button></li>
                <li itemID=6 id='6' class="ui-state-default">6<button>delete</button></li>
                
                <li itemID=1 id='1' class="ui-state-default">1<button>delete</button></li>
                <li itemID=4 id='4' class="ui-state-default">4<button>delete</button></li>
                <li itemID=9 id='9' class="ui-state-default">9<button>delete</button></li>
                <li itemID=2 id='2' class="ui-state-default">2<button>delete</button></li>
                <li itemID=8 id='8' class="ui-state-default">8<button>delete</button></li>
                <li itemID=5 id='5' class="ui-state-default">5<button>delete</button></li>
                <li itemID=11 id='11' class="ui-state-default">11<button>delete</button></li>
                <li itemID=7 id='7' class="ui-state-default">7<button>delete</button></li>
   ...

JavaScript

$(function() {
    $("#sortable").sortable();

    $(":button").not('#sort').click(function() {
        $(this).parent().remove();
        var arr = $("#sortable").sortable('toArray');
        text = arr.toString();
        alert(text);
    });

    $('#sort').click(function() {

        var mylist = $('#sortable');
        var listitems = mylist.children('li').get();
        /* listitems.sort(function(a, b) {
            var compA = parseFloat($(a).attr('id'));
            var compB = parseFloat($(b).attr('id'));
            return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
        }); */        
        $.each(listitems, function(idx, itm) {
            mylist.append(itm);
        });
    });
});