JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="grid drag-menu">

	
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>
	
	<div class="grid-cell ">
		<div class="plus-icon"></div>
	</div>


</div>

CSS

body {
	font: 100 1em/150% "proxima-nova", Helvetica, sans-serif;
	margin: 0;
	position:relative;
}

.cm-container {
	margin: 0 35px;
	border: 3px solid #03A9F4;
}

.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

.grid-column {
	flex-direction: column;
	display: flex;
	flex-wrap: wrap;

}

.grid-center {
	justify-content: center;
	align-items: center;
}

.grid-align-center {
	align-items: center;
}

.grid-right {
	justify-content: flex-end;
	align-items: center;
}

.grid-column-right {
	justify-content: center;
	align-items: flex-end;
}


.grid-space-around {
	justify-content: space-around;
}

.grid-space-between {
	justify-content: space-between;
}

.grid-cell {
	padding: 1em 1em 1em;
	background: rgba(51, 153, 204, .2);
	transition: background-color 0.3s ease;
	border: 1px solid #33cccc;
	border-radius: 3px;
	position: relative;
	cursor: crosshair;
}

.grid-cell:hover {
	background: rgba(255, 152, 0, 0.29);
}

.self-end {
	align-self: flex-end;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: center;
}

.self-stretch {
	align-self: stretch;
}

/* flex sizes */

.flex-1 {
	flex: 1;
}


/* text centering*/

.text-center {
	text-align: center;
}


/* other styles */

.title {
	color: #000;
	font-size: 11px;
	position: absolute;
	top: -14px;
	right: 4px;
}

.plus-icon {
	background-image: url("https://cdn0.iconfinder.com/data/icons/math-business-icon-set/93/1_1-512.png");
		background-size: cover;
		height:14px;
		width:14px;
	position: absolute;
	right: 2.5px;
	top: 2.5px;
	cursor:pointer;
	opacity:0.1;
	transition: all 0.5s;
}

.plus-icon:hover {
	transition: all 0.5s;
	opacity:1;
}

.m-paragraph {
	max-width: 250px;
}

.grid-cell img {
	border-radius: 50%;
	margin-left: 10px;
}

.margin-right {
	margin-right: auto;
}

.margin-left {
	margin-left: auto;
}

.margin-top {
	margin-top: auto;
}

/* single-page build settings */

.main-grid-cell {
	height: 93.5vh;
	margin-top: 1px;
}

.logo {
	padding:...

JavaScript

var i = 0;
var yourCurrentlyHoveredElement;
var containerPLus = false;


$('.grid-cell')
        .attr("id", 'originalParents')
		.draggable({ containment: ".grid-containment :hover", scroll: false })
        .resizable()

        .droppable({
            over: function (event, ui) {
                yourCurrentlyHoveredElement = $(this); //the 'this' under over event
            },
            drop: function (event, ui) {
            var target = ui.draggable;
            console.log(target);
            if (yourCurrentlyHoveredElement.attr("id") === "originalParents") {
                yourCurrentlyHoveredElement.append(target);
            }
        }
});

$( ".plus-icon" ).click(function() {
    $(this).parent(".grid-cell").append("<div class='grid-cell' onmouseover='call_mouseover()'><p class='number' id = '\" + i + \"'>" + i + "</p>" + "</div>");
    /*1st grid-cell created*/

    $(this).parent(".grid-cell").addClass("grid");

    $('.grid-cell')
        .draggable({containment: ".grid-containment", scroll: false})
        .resizable();

    i++;

    $('.number')
        .draggable({containment: ".grid-cell", scroll: false});
});

function call_mouseover() {

}