Not able to drop a draggable on dynamically created droppable inside another droppable

Please see jsfiddle.

I want to add a new div (Row in my example) that can be added to it another div (Button in my example) by drag and drop (jQuery UI).

I created new div ($row) in helper function (addNewRow) and added new function for drag and drop another div to it like this:

$('.rowDashboard').draggable({
        containment: '#content',
        cursor: 'move',
        helper: addNewRow,       
        revert: "invalid",
    });

// helper function
function addNewRow() {
     $row = $(document.createElement('div'));
     $row.attr("id","droppableDiv");
     $row.html("drop here");
     $row.droppable({
        accept: ".buttonDashboard",
       // greedy: true,
        drop: function (ev, ui) {
        alert('ok');                    
        },
    });
     return $row;
}

I expected that ok message would appear by dropping div with buttonDashboard class to div with rowDraggable but drop function doesn't fire.

Is it correct to add drop function in helper function?

If it is incorrect, then what is the solution to that?

Thanks advance.