JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<!--input type="button" id="button" disabled="disabled" value="Add Div with Text" /-->
<a href="#" id="button" role="button"><i class="fa fa-plus"></i> Post Sticky</a>

<br/>
<div>
    <div class="middle-side empty"></div>
</div>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

CSS

.middle-side {
    width: 500px;
    height: 500px;
    border: 2px solid;
}
.draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    background:#FFFFDD;
    position: relative;
    z-index: 1;
}
.placement {
    border: 2px dashed #000;
}

JavaScript

/** Disable button **/
$('.form-control').prop('disabled', true);
$('textarea').keyup(function (e) {
    //$('#button').prop('disabled', this.value == "" ? true : false);
    $('#button').prop(this.value == "" ? e.preventDefault() : false);
});

/* Disregard */
var z = 1,
    id = 1;
$('#button').click(function (e) {
    var text = $('textarea').val();
    console.log(text);
    if(text == ''){
        return;
    }
    /** Make div draggable **/
    $('<div />', {
        id: "drag" + id++,
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function (event, ui) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');


    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function (e) {
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({
            'top': relY + 30,
            'left': relX + 10,
            'position': 'absolute'
        });
    })

});

/** Place a temporary dashed border on div after initial creation**/
$('.middle-side').on('click', function (e) {
    var offset = $(this).offset();
    var relX = e.pageX - offset.left;
    var relY = e.pageY - offset.top;
    $('.placement').css({
        'top': relY,
        'left': relX,
        'position': 'absolute'
    });
    $(this).off("mousemove").find('.placement').removeClass('placement')
});

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});