JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css">
<a id="destroy" href="#">Destroy</a>
<div id="container">
    <div id="p1" class="widget"></div>
</div>

CSS

.widget {
    padding:10px;
    margin-top:10px;  
    background:#bbb;    
    width:30px;
    height:30px;
}

.ui-draggable {
    border:1px solid black;   
    cursor:move;
}

JavaScript

$(function() {
    
    $("#destroy").click(function (e) {
        e.preventDefault();
        $(".widget").draggable("destroy");
    });     
    
    // Make p1 a draggable
    $(".widget").draggable();   
    
    // Clone p1
    var $clonee = $("#p1").clone(true, true);
    
    // Change clone attributes
    $clonee.attr('id', 'p2');
    
    // Append clone to the container
    $("#container").append($clonee);

});