drag & drop using jQuery in a table to create a copy for every drag - html

Question

I'm using jQuery for drag & drop in a table , the requirement is like when I drag image to multiple cells(one by one) I'm dynamically adding a div and to the div s, I'm adding span text like wise I want that to all the cells . I'm trying clone() to the compose so the copy can we created but when I drag span text also it is creating copy of 'div'. please run the snippet and see the issue.
Please Response.
Thanks in advance :)
$(function() {
var compose = $("<div>", {
id: "data-hide",
class: "db-click"
});
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "xyz.png"
}).appendTo($("p", compose));
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "abc.png"
}).appendTo($("p:eq(1)", compose));
$("#init").draggable({
opacity: 0.5,
helper: "clone",
});
$(".drag-able").draggable({
opacity: 0.5,
helper: "clone",
});
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$(compose).clone().appendTo(this);
$(".drop-able").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable.clone());
}
});
}
});
});
#slot {
border: 1px dashed black;
width: 100px;
height: 40px;
}
#slot1 {
border: 1px dashed black;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
<span class="drag-able">hello</span>
<span class="drag-able">morning</span>
</div>
<table>
<tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
<td id="slot"></td>
<td id="slot1"></td>
</tr>
</table>

Answer 1

I remodified few thing and this will do the thing.
$(function() {
var compose = $("<div>", {
id: "data-hide",
class: "db-click"
});
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "xyz.png"
}).appendTo($("p", compose));
$("<p>", {
class: "margin5 strong drop-able"
}).appendTo(compose);
$("<img>", {
src: "abc.png"
}).appendTo($("p:eq(1)", compose));
$("#init").draggable({
opacity: 0.5,
helper: "clone",
});
$(".drag-able").draggable({
opacity: 0.5,
helper: "clone",
});
$("td").droppable({
tolerance: 'pointer',
drop: function(event, ui) {
$("td").droppable('enable');
$(compose).clone().appendTo(this);
$(".drop-able").droppable({
drop: function(event, ui) {
$(this).append(ui.draggable.clone());
}
});
if($(this).has('#data-hide').length) {
$(this).droppable('disable');
}
}
});
});
#slot {
border: 1px dashed black;
width: 100px;
height: 40px;
}
#slot1 {
border: 1px dashed black;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
<span class="drag-able">hello</span>
<span class="drag-able">morning</span>
</div>
<table>
<tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
<td id="slot"></td>
<td id="slot1"></td>
</tr>
</table>