On Drop - Clone a Different node or corresponding

问题:

On the drop (after drag) -- how can I clone a different (corresponding) element that resides somewhere else or back on the server, i.e. target and clone a different element on the server

For e.g. On client side the corresponding icons map to the server elements icon_chartXY == Server side ChartXY etc..

1) in the browser on the left , I have small icons/pictures that represent various charts (xy, or barchart).

2) After dragging the icons, then drop into a larger

During clone - How can I GET or clone the actual chart (HTML, JS) from the server side, Which could be a actual chart represented by the icon, or an HTML/Js chart?

$(function () {

    $('.menu').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this) 
                .append(ui.helper.clone(false).css({  // clone a different element
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});

JS Fiddle of how far I got