JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://desandro.com/demo/masonry/jquery.masonry.min.js"></script>
<input id="edit" type="button" value="Box Edit Mode" />
<input id="sort" type="button" value="Sort and Save" />    
<ul id="sortable1" class="sortable">
    <li class="ui-state-default double-triple"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default double-single"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default double-single"></li>
    <li class="ui-state-default single-single"></li>
</ul>

CSS

.sortable {clear:both;}
.sortable:after {
    content: ''; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
ul {list-style:none;}
.ui-state-default {float:left; margin:6px;position:relative;min-height:125px;min-width:150px;background:rgba(0,0,0,.25);}
.single-single {width:150px; height:125px; } 
.single-double {width:150px; height:262px;}
.single-triple {width:150px; height:400px;} 

.double-single {width:312px; height:125px;}
.double-double {width:312px; height:262px;}
.double-triple {width:312px; height:400px;}
.placeholder {
    margin: 6px;
    border: 3px dashed #000;
    float:left;
    min-width:150px;
    min-height:125px;
    background:yellow;
}

JavaScript

$(document).ready(function() {
    $('#edit').click(function() {

        var itemList = $('.sortable');

        itemList.sortable({
            placeholder: 'placeholder',
            delay:1000,
            start: function(event, ui) {
                var plus;
                if(ui.item.hasClass('single-single')) plus = 'single-single'; else
                if(ui.item.hasClass('single-double')) plus = 'single-double'; else
                if(ui.item.hasClass('single-triple')) plus = 'single-triple'; else
                if(ui.item.hasClass('double-single')) plus = 'double-single'; else
                if(ui.item.hasClass('double-double')) plus = 'double-double'; else
                if(ui.item.hasClass('double-triple')) plus = 'double-triple'; else
                     plus = 'single-single';
                ui.placeholder.addClass(plus);
            }});
        itemList.sortable({
                    update: function(event, ui) {
                        $('#loading-animation').show(); // Show the animate loading gif while waiting
                        opts = {
                            url: MyAjax.ajaxurl,
                            // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                            type: 'POST',
                            async: true,
                            cache: false,
                            dataType: 'json',
                            data: {
                                action: 'item_sort',
                                // Tell WordPress how to handle this ajax request
                                order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                            },
                            success: function(response) {
                                $('#loading-animation').hide(); // Hide the loading animation
                                return;
                            },
                            error:...