JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<button id='new'>New</button>
<div id='box1'></div)

CSS

div#box1 {
    width:200px;
    height:150px;
    background-color:beige;
    position: absolute;
    top:50px;
    left:25px;
}

JavaScript

$(function() {
$('#new').click(function() {
    debugger;
    var box1$ = $('#box1');
    var new_offset = box1$.offset();
	var new_width = box1$.width();
	var new_height = box1$.height();
	box1.remove();
			
		var newElement$ = $('<textarea>').width(new_width)
						   			.height(new_height)
								    .draggable()   
					  				.resizable() 
									.css({
											'position'	        : 'absolute',
											'background-color'  : 'yellow',
											'border-color'      : 'black',
											'border-width'      : '1px',
											'border-style'	    : 'solid'
								     })
									 .offset(new_offset)
						             .appendTo('body');
            });
              
});