Jquery UI dynamic create droppable area

Question

I try to make multi droppable area (JQueryUI). Not work append droppable area after page load. My purpose create dynamic droppable new area (one or one more).

example droppable-area in droppable-area in droppable-area............

HTML side

<div class="control">
     <label class="control-label" id="label_0">Data</label>
</div>
<div class="control">
     <div class="col drop-area" id="area_0">New Droppable Area</div>
</div>

<div class="drop-area"></div>

This code working for not dynamic create area.

$('.control').draggable({
    connectToSortable: '.drop-area',
    helper: 'clone'
});

$('.control').on("dragcreate", function () {
    $(this).addClass("active");
});

var removeIntent = false;
$('.drop-area').sortable({
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    over: function () {
        removeIntent = false;
    },
    out: function () {
        removeIntent = true;
    },
    beforeStop: function (event, ui) {
        if (removeIntent == true) {
            ui.item.remove();
        }
    },
    receive: function (event, ui) {
        checkId(ui.item);
    }
});


function checkId(elem) {
    var curId = elem.children().children().prop("id");
    var lastId = $('.drop-area').find("[id^='" + curId + "']").last().prop('id');

    var splitStr = lastId.split("_");
    var idName = splitStr[0];
    var idNum = splitStr[1];

    if (isNaN(idNum)) {
        idNum = 1;
    } else {
        idNum++;
    }

    elem.children().children().prop("id", idName + "_" + idNum);
}

I tried adding it by dragging or button clicking, but neither method worked. Does not detect drag

<div class="control">
     <div class="col drop-area" id="area_0">New Droppable Are</div>
</div>

$(".drop-area").append("<div class='drop-area ui-droppable'></div>");

I am grateful in advance for your help