I think you need to make the dynamically created div droppable.
To do that add this code at the end of the addTab() function
jQuery('#'+id).droppable({
activeClass: 'drag-drop-box-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
I guess your current jquery code runs only once when the page finished loading. At this time only existing divs are made droppable. For new ones the code needs to run again.