How to append or add html code to a draggable element in the drop area in Jquery

I'm having a normal html section where I'm dropping some html code. I need them to append after the class .page-content-wrapper if there is no item and if there is item I want to append the html code below the very last element and each element is sortable. I'm pulling out the html code through my php function in JSON format while taking it to console.log I get:

Object {htmlcode: "<div>//html code....</div>"}

I've already passed datatype to be json in ajax request I'm just pulling out the data to the droppable section so that I can append to the last element in the droppable zone. where I'm simply retuing the value to a variable and trying to append it in the droppable element. Following is my JQuery:

var origin= 'sortable';
var nitsbuilder = {
    nits_id: $('[data-nitsid]'),
    editarea: $('.page-content-wrapper')
};

nitsbuilder.dropeventhandler = function ($item) {
    var nits_id = $item.data('nitsid');
    $.ajax({
        method: 'POST',
        url: dropurl,
        data: { nits_id: nits_id, _token: token},
        dataType: 'json',
        success: function (data) {
            console.log(data);
            nitsbuilder.editarea.html(data);
        }
    });
}

nitsbuilder.init = function () {
    var navmenu= $('ul.nitseditormenu').find('li').find('ul').find('li');
    navmenu.draggable({
        coectToSortable: "nitsbuilder.editarea",
        helper: "clone",
        cursor: "move",
        start: function () {
            origin = 'draggable';
        }
    });

    nitsbuilder.editarea.droppable({
       drop: function (event, ui) {
                nitsbuilder.dropeventhandler(ui.draggable);
       }
    }).sortable({
        revert: true
    });
}();