draggable divs onto droppable textboxes then back to their original places

Question

I am trying to drag my divs onto droppable texboxes then I would like to send draggable divs back to their original places using clearable in textboxes.

in this jsfiddle I am hiding the current draggable and displaying the text inside textboxes but when I click clearable button I am showing all the draggable divs. How can I can display only the current draggable after clicking clearable button? or is there any other way to do that?

.on('touchstart click', '.onX', function(ev) {
$(".draggable").css({
'left': $(".draggable").data('originalLeft'),
'top': $(".draggable").data('origionalTop')
});
$(".draggable").show();
$(this).removeClass('x onX').val('').change();
});

I need o change $(".draggable") to the current draggable. Because right now When I click the clearable button in any of the textboxes all of the draggable divs go back to their original places.

Answer 1

I have just figured it out. When I drag a div onto a textbox I give an id to draggable div.

$(ui.draggable).attr("id", $(ui.draggable).text());

then when click the clearable button I call that id.

 $("#" + currentID).css({
        'left': $(".draggable").data('originalLeft'),
        'top': $(".draggable").data('origionalTop')
    });
    $("#" + currentID).show();

You can check it out here http://jsfiddle.net/nakres/hqbhLzkm/