JSFiddle - React, Tailwind, and code Playground

HTML

<div id="">
    <a href="#" id="menu">Textbox</a>
</div>

<div id="Container">
    <!-- this is Dynamic area -->     
    <p>Drop here</p>
</div>

<input type="Submit" name="submit" id="submit">

CSS

#menu{ padding: 0.5em; float: left;}
#Container{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color:#ffff00;}

JavaScript

$(function() {
    $("#menu").draggable({
        revert: "valid"
    });
    $("#Container").droppable({
        drop: function(event, ui) {
            $(this).html('<input type="text" name="textbox" id="textbox" value="" >');

        }
    });


    $("#submit").click(function() {
        alert($('#textbox').val());
    });
});