JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn2">new div</button>
<button id="btn">new table</button>

<button id="btn4">posit</button>
<br/>
<div id="container"></div>
<div id="c"></div>
<input type="text" id="tr" value="" />
<input type="text" id="td" value="" />

CSS

.resize {
    background-color: #29e;
    color: white;
    font-size: 20px;
    font-family: sans-serif;
    border-radius: 8px;
    position : fixed;
    
   
    
}
#container {
    box-shadow: 4px 0px 18px -1px #0000ff;
    width: 700px;
    height: 500px;
    
}
.selected {
    border:1px dotted black;
    /*box-shadow:0px 0px 10px rgba(0,0,0,0.5);*/
}

JavaScript

$(document).ready(function () {
var parentDivId;
     $("#btn4").click(function(){
     var widthparent=$("#"+parentDivId).width();
     var heightparent=$("#"+parentDivId).height();
     var c_t=$("table");
     var posit=" ";
     c_t.each(function(indx, el){
          var position = $(this).position();
          posit+="#t"+(indx+1)+"{left: " + (100*position.left/widthparent) + "%, top: " + (100*position.top/heightparent)+"%}"
           });
     alert(posit);

    });


    var dname_id = 1;
    $("#btn2").click(function () {

        var dynDiv = $('<div>')
            .attr('id', 'div_' + dname_id++)
            .css({
            'width': '50px',
                'height': '20px'
        })
            .addClass('resize')
            .html(dname_id - 1);

        $('#container').append(dynDiv);
        //-------------------------------------------------------//
       dynDiv.resizable({
            containment:"#container"
        });
        dynDiv.draggable({
            containment: 'parent'
        });

        dynDiv.click(function () {

            $('.selected').removeClass('selected');
            $(this).addClass('selected');


        });


    });
     var table_id=0;
 function new_table() {
     var divid = $(".selected").attr("id");
 var countTr = $("#tr").val();
 var countTd = $("#td").val();
 table_id++;
 $('#' + divid).append("<table id='t"+table_id+"'style='position:relative;top:0px;left:0px;'</table>");
        for (var i = 1; i <= countTr; i++) {
            $('#container #t'+table_id).append("<tr></tr>");
            for (var n = 1; n <= countTd; n++) {
                $('#container #t'+table_id+' tr:last').append("<td>" + i + "." + n + "</td>");
            }
        }
        $("table").draggable({containment: 'parent'});
        $("table").resizable({});


     $("table").click(function(){
          parentDivId = $(this).parent().attr('id');
          var widthparent=$("#"+parentDivId).width();
  alert(widthparent+" "+parentDivId)


 ...