JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="initiation()">
    <div class="area"></div>
    <input type="button" value="text" onclick="maketext()"/>
    <p>Press button "text" repeatedly.
    </p>
    <p> click - set SELECTED and DRAGGABLE <br/>
        dblclick - edit text    
    </p>
</body>

CSS

.area{
    width: 400px;
    height:400px;
    border: solid 1px #ccc;
}
input{
    margin:auto;
}
.divtxt{
    border: solid 1px #ddd;
}
.selected{
    border: dashed 1px #7777FF;
}

JavaScript

var zz=0;
function initiation(){
$('.area').on('click', function(){elSelect($('.area'))});
}

function maketext(){
var divTxt;
var area=$('.area');
zz++;
    
divTxt=$('<div class="divtxt" contenteditable="false">Text_'+zz+'</div>');

divTxt.on('click', function(){elSelect(divTxt);});
divTxt.on('dblclick', function(){txtSelect(divTxt);});
divTxt.css({position:'absolute',top: 50,left:50,'z-index':zz}).appendTo(area);
console.log('add text ok');
}

function elSelect(el){
	if ($(el).hasClass('area')){
		elDraggableDestroy();
		return false;
	};
	
	if ($(el).hasClass('selected')){
		event.cancelBubble = true; 
		return false;
	} else {
		elDraggableDestroy();
		$(el).toggleClass('selected'); 
		$(el).draggable({cursor: 'move',containment:'.area'}); 
	};
	event.cancelBubble = true;
}

function elDraggableDestroy(){
	var el=$('.selected');
	el.each(function(){
		if($(this).hasClass("ui-draggable") ){$(this).draggable('destroy'); };
		$(el).attr("contenteditable",false);
		$(this).removeClass('selected');
		event.cancelBubble = true;
	});
}

function txtSelect(el){
	elDraggableDestroy();
	elSelect($(el));
	if ($(el).hasClass("ui-draggable")){$(el).draggable('destroy')};
	$(el).attr("contenteditable",true);
	$(el).select();
	event.cancelBubble = true; 
	return true;
}