remove Duplicate Item From Drag and drop jquery

Question

in my html page i apply drag and drop feature and jpages also,

 

when i drag item from 1 list and add it to another list on which jpages apply,  It shows that item on every jpages 

means if my list contain <-previous 1 2 3->  so that item dissplay on every page ,but that item added only onces in li,but it display on every page

 

my script

<script>

$(function () {
$('.sortable2').draggable({ revert: true});

('.btn-bg').droppable({
hoverClass: 'active',
accept:'#sortable1 #aside1',
drop: function (event, ui) {
$(ui.draggable).remove()
}
});


$('#sortable1').droppable({
drop:function(event,ui){
accept: ":not(.ui-sortable-helper)",
  }
}) ;

$("#sortable1,#sortable2").sortable({
connectWith: ".connectedSortable" ,
receive: function () {},
update: function (event, ui) {}
}).disableSelection().droppable({
drop: function (ev, ui) {
var draggableId = ui.draggable.attr('id');
var draggedIdConcat = '#' + draggableId;
$(draggedIdConcat).effect("highlight", { color: "#F2FF00" });
destroyAndCreate();
}
});;



$("#holder").jPages({
containerID: "sortable2",
perPage:12,
startPage: 1,
startRange: 1,
midRange:2,
endRange: 1,

});

$("#pager").jPages({
containerID: "sortable1",
perPage: 6,
startPage: 1,
startRange: 1,
midRange: 2,
endRange: 1

});


});

function addNewElement() {
  }

function destroyAndCreate(){
var pages=$("#pager").jPages("destroy");
pages.jPages({
containerID : "sortable1",
perPage : 6,
startPage: 1,
startRange: 1,
midRange: 2,
endRange: 1
});
}


</script>