JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ShapeContainer">
</div>

CSS

.shape {
    border: 1px solid grey;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 5px;
}

.highliteShape {
    border: 1px solid red;
    z-index: 10000;
}

JavaScript

$(document).ready(function() {

     /// the Assync function.

    var asyncFor = function(params) {

        var defaults = {
          total: 0,
          limit: 1,
          pause: 10,
          context: this
        },
          options = $.extend(defaults, params),
          def = $.Deferred(),
          step = 0,
          done = 0;

        this.loop = function() {
          if (done < options.total) {
            step = 0;
            for (; step < options.limit; step += 1, done += 1) {
              def.notifyWith(options.context, [done]);
            }
            setTimeout.apply(this, [this.loop, options.pause]);
          } else {
            def.resolveWith(options.context);
          }
        };

        setTimeout.apply(this, [this.loop, options.pause]);
        return def;
      };

var maxSize = 2000;
var x=0;

    asyncFor({
      total:50,      
      context: this
    }).progress(function(step) {

var y=0;
    for(var y=0; y<maxSize; y+=35){
 
 $("#ShapeContainer").append("<div class='shape' style='left:" + x + "px; top:" + y + "px;'><div>x</div></div>"); 


        
    }

x+=35;

        
     }).done(function() {

    alert("finished")
resize() 
    });

  function resize() {  
                   $(".shape").resizable({
        start: function (event, ui) {
            $(this).addClass("highliteShape");
        },
        stop: function (event, ui) {
            $(this).removeClass("highliteShape");
        }
    }).draggable({
        cursor: "move",
         start: function (event, ui) {
            $(this).addClass("highliteShape");
        },
        stop: function (event, ui) {
            $(this).removeClass("highliteShape");
        }
    });
  }
    });