I cannot remove an item copied from one list to another (drag and drop)

Question

I have the following code http://jsfiddle.net/6hLsfqtn/.

My problem occurs as follows:

1. Add a Double Steppe to the list on the right.
2. I add a Simple Steppe to the list on the right.
3. Add a second Double Steppe to the list on the right.
4. Drag a Double Steppe to "Remove"
5. The two Double Steppes are removed.

I have already identified that the problem is in the removal, because I have removed the dataitem. I tried to pass dataitem.id and it still didn’t work because the Id’s clone themselves by dragging some piece from the list from left to right.

I need Ids to be different so that when removing with dataitem.id it only removes one piece.

Answer 1

The problem is that when you add the items to the left div the UID (http://docs.telerik.com/kendo-ui/api/javascript/data/model#Fields-uid) the object is the same. I refer to the code:

dataItem = listA_DS.getByUid(draggableElement.data("uid"));

I did not find in the documentation a way to create a new item from another. So I created by hand. with the code:

dataItem = listA_DS.getByUid(draggableElement.data("uid"));
var novo = { id: dataItem.id, item: dataItem.item, img: dataItem.img };
listB_DS.add(novo); 

So it creates a new uid at each insertion and at the time of removing ends the problem of removing all.

Code available at http://jsfiddle.net/mapquintal/42js9axv/2/

Corrections requested by you at http://jsfiddle.net/mapquintal/42js9axv/3/