Adobe Edge & Javascript / jquery show element from a cloned object

问题

Hello wizards of the internet,

I want to show a hidden element ("hold1") from a cloned object when it is is dropped into a certain container, called "plug1". But what it does right now is it shows the hidden element on the main object and not on the cloned object. It's also not supposed to jump back to its original position. See this gif for an example.

I believe it has something to do with the sym.getSymbol("cup1").$("hold1").show(); line, but I can't put my finger on it.

Does anyone have an idea as to how I can fix this?

Script:

sym.$(function () {

    sym.$("cup1").draggable({
        helper: "clone",
        cursor: 'move'
    });
    sym.$("Stage").droppable({
        drop: function (event, ui) {
            var $canvas = $(this);
            if (!ui.draggable.hasClass('canvas-element')) {
                var $canvasElement = ui.draggable.clone();
                $canvasElement.addClass('canvas-element');
                $canvasElement.draggable({
                    containment: 'Stage'
                });
                $canvas.append($canvasElement);
                $canvasElement.css({
                    left: (ui.position.left),
                    top: (ui.position.top),
                    position: 'absolute'
                }); 

                sym.$("cup1").hide().clone().appendTo('Stage'); 
                }
        }
    });
     //hold
     sym.$("plug1").droppable({
         greedy: 'true',
         accept: function() { return true; },
         drop: function (event, ui) { tolerance: 'fit', sym.getSymbol("cup1").$("hold1").show(); }

     });
});

来源：https://stackoverflow.com/questions/41795114/adobe-edge-javascript-jquery-show-element-from-a-cloned-object