JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.c3mserver.us/pub/jquery.isotope.js"></script>
<div id="button-bar">
    <div id="wp-admin-bar-sort" class="button">
        <a href="JavaScript:void(0);">ISOTOPE</a>
    </div>
    <div id="wp-admin-bar-edit" class="button">
        <a href="JavaScript:void(0);">SORTABLE</a>
    </div>
</div>
<div id="wrapper">
    <ul id="sortable" class="ui-sortable">
        <li class="double-double ui-state-default">2x2</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="double-single ui-state-default">2x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="double-single ui-state-default">2x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="single-single ui-state-default">1x1</li>
        <li class="double-single ui-state-default">2x1</li>
        <li class="single-single ui-state-default">1x1</li>
    </ul>
</div>

CSS

#button-bar {height:75px;width:120px;position:fixed;top:0; left:0;z-indez:1000;margin-right:10px;}
#wrapper {
    background: white;
    width: 988px;
    margin: 20px auto;
    padding: 0;
    overflow: hidden;
    margin-left:80px;
    padding-left: 12.5px;
}
#sortable {height:2741px;}
.button a {background:#000;color:#fff;padding:5px;float:left;margin:5px;}
.sortable {clear:both;}
.sortable:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.ui-state-default {float:left; margin:12.5px;position:relative; background:rgba(0,0,0,.4);}
.single-single {width:300px; height:250px; background:darkred;} 
.single-double {width:300px; height:525px;}
.single-triple {width:300px; height:800px;} 
.double-single {width:625px; height:250px; background:darkblue;}
.double-double {width:625px; height:525px; background:black;}
.double-triple {width:625px; height:800px;}

img#loading-animation {display:none;}

.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

JavaScript

$(document).ready(function() {

    var $itemList = $('#sortable');

    $itemList.isotope({
        resizesContainer: false,
        masonry: {
            rowHeight: 250,
            columnWidth: 325

        }

    });

    $('#wp-admin-bar-edit').click(function() {
        $itemList.isotope('destroy');



        $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: function(xhr, textStatus, e) { // This can be expanded to provide more information
                   //     alert(e);
                        // alert('There was an error saving the updates');
                   //     $('#loading-animation').hide(); // Hide the loading animation
                     //   return;
                  //  }

                };
                $.ajax(opts);
            }
        });

    });

});

$(document).ready(function() {
    $('#wp-admin-bar-sort').click(function() {
        $('#sortable').isotope({
            resizesContainer: false,
            masonry: {
                rowHeight: 250,
                columnWidth: 325

            }


        });

   ...