JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<button id="opener">open the dialog</button>
<div id="outter-dialog" title="Notes">
    <button id="add-note">Add Note</button>
</div>

JavaScript

$("#outter-dialog").dialog({
    autoOpen: false,
    title: "Success Message",
    width: $(window).width(),
    height: $(window).height(),
    modal: false,
    buttons: {
        Cancel: function () {
            $(this).dialog('close');
        }
    }
});

$("#opener").click(function () {
    $("#outter-dialog").dialog('open');
});


var prevelement;
var elementCount = 0;
$("#add-note").click(function () {
    var dynamicDialog = $('<div> <textarea>Hello</textarea> </div>');
    var pos = {
        my: "left",
        at: "bottom",
        of: "#dialog" + elementCount
    }

    var dialogId = "dialog" + elementCount;
    dynamicDialog.clone(true).attr("id", dialogId).dialog({
        title: "Note",
        modal: false,
        appendTo: "#outter-dialog",
        draggable: false,
        resizable: false,
        buttons: [{
            text: "Save",
            click: function () {}
        }],
        position: pos
    });
    $("#" + dialogId).parent().draggable().resizable();
    elementCount++;
});