JSFiddle - React, Tailwind, and code Playground

HTML

<p id="position">Position: <span></span></p>

CSS

body {
    background-color: Yellow;
    border: 2px solid Red;
    height: 300px;
    margin: 20px;
}

#position  {
    float: right;
    background-color: #FFF;
    width: 140px;
    line-height: 40px;
    height: 40px;
    text-indent: 10px;
}

.clone {
    border: 2px solid Cyan;
}

JavaScript

var icon = $("<div  style='width:100px;height:100px;border-style:solid;'></div>");
$(icon).draggable({
    containment: 'parent',
    axis: 'y',
    drag: function(e, ui) {
        $("#position span").text("(" + $(this).position().left + ", " + $(this).position().top + ")");
    }
});

var clone = icon.clone(true);

clone.addClass("clone");

clone.appendTo($("body"));
icon.appendTo($("body"));