JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="btn_add" value="sticker" />
<input type="button" id="btn_addrectangle" value="rectangle" />
<input type="button" id="btn_addrack" value="rack" />

<input type="text" id="txt_name" value="element_0" title="new element id"/>

<div id="canvas">
 
    <div class="rectangle draggable resizable"
        style="left:0px; top:0px; width:200px; height:300px;"
        type="rectangle" id="rectangle_org">
        
        <div class="rack draggable resizable"
            style ="left: 0; top:40px; width: 50px; height: 100px;"></div>
        
        <div class="sticker sticker_green draggable"
            type="sticker" id="green"
            style="left:0px; top:0px;">
        </div>

        <div class="sticker sticker_yellow draggable"
            type="sticker" id="yellow"
            style="left:30px; top:0px;"></div>
        
        <div class="sticker sticker_red draggable"
            type="sticker" id="red"
            style="left:60px; top:0px;">
        </div>

        <div class="sticker sticker_gray draggable"
            type="sticker" id="gray"
            style="left:90px; top:0px;">
        </div>

    </div>
</div>

CSS

/* Back ground*/
#canvas {
    position: relative;
    background-color: lavender;
    z-index: 1;
    
    width: 100%;
    height: 600px;

    padding: 10px;
    
    border: solid 1px black;
}

.rectangle {
    position: absolute !important;
    background-color: white;
    border: solid 3px black;
    
    /* for title */
    text-align:center;
    padding: 10px 0px 0px 0px;

    z-index: 2 !important;
}

.rack {
    position: absolute !important;
    background-color: #5B9BD5;
    border: solid 1px black;

    z-index: 3 !important;
    width:900px;
}

/* sticker Icon*/
.sticker { 
    position: absolute !important;
    /*width: 27px;*/
    width: 18px;
    height: 27px;
    
    z-index: 4 !important;
}

.sticker_green {
    background-color: green;
}

.sticker_yellow {
    background-color: yellow;
}

.sticker_red {
    background-color: red;
}

.sticker_gray {
    background-color: gray;
}

/* Cursor */
.draggable {
    cursor: move;
}



.rect { 
    position: absolute !important;
    /*width: 27px;*/
    width: 18px;
    height: 27px;
    
    z-index: 100 !important;
}

.rect_green {
    background-color: green;
}

.rect_yellow {
    background-color: yellow;
}

.rect_red {
    background-color: red;
}

.rect_gray {
    background-color: gray;
}

.draggable {
    cursor: move;
}

JavaScript

var strEele = "element";
    var idIndex = 1;

    $(document).ready(function () {
        $(".draggable").draggable({
            containment: "parent"
        });

        $(".resizable").resizable({
            containment: "parent",
            handles: "ne, nw, se, sw, n, w, e, s"
        });
        
        
        $("#btn_add").click(function () {
            OnClickAddsticker();
        });
        
        $("#btn_addrectangle").click(function () {
            OnClickAddrectangle();
        });
        
        $("#btn_addrack").click(function () {
            OnClickAddrack();
        });
    });

    function OnClickAddsticker() {
        var newstickerId = $('#txt_name').val();
        $('#txt_name').val(strEele+"_"+(idIndex++));

        var stickerDiv = document.createElement('div');
        stickerDiv.className = 'sticker sticker_gray draggable';
        stickerDiv.id = newstickerId;
        stickerDiv.style.top = 100 + 'px';
        stickerDiv.style.left = 100 + 'px';
        stickerDiv.setAttribute('type', 'sticker');
        stickerDiv.setAttribute('title', newstickerId);

        $('#canvas').append(stickerDiv);
        
        $('#' + newstickerId).draggable({
            containment: "parent"
        });
    }

    function OnClickAddrectangle() {
        var newrectangleId = $('#txt_name').val();
        $('#txt_name').val(strEele + "_" + (idIndex++));

        var rectangleDiv = document.createElement('div');
        rectangleDiv.className = 'rectangle draggable resizable';
        rectangleDiv.id = newrectangleId;
        rectangleDiv.style.top = 100 + 'px';
        rectangleDiv.style.left = 100 + 'px';
        rectangleDiv.style.width = 100 + 'px';
        rectangleDiv.style.height = 200 + 'px';
        rectangleDiv.setAttribute('type', 'rectangle');
        rectangleDiv.setAttribute('title', newrectangleId);
        rectangleDiv.innerHTML = newrectangleId;
        
        $('#canvas').append(rectangleDiv);

        $('#' +...