Draggable/resizable image on image

i want to make resizable, draggalbe image in front of another image, when I try to make it resizable it brokes all css ant it's not in front of first image. JSFiddler Demo

 $(document).ready(function() {

    $(".el").click(function() {

        $("#bg").before(function() {
            return $(".el").clone().toggleClass('res').draggable({
              containment: "#bg"
            });
        });

        });
        $("#bg").droppable({
          drop: function( event, ui ) {
             x = ui.helper.clone();

          }
        });

});

Solution

Firstly, you're cloning ALL .el so you'll get 1 on first click then 2 on the second then 4, 8, 16, etc. Secondly, you're placing the cloned element before #bg rather than inside it.

Use .append in place of .before and only clone the instance of .el that is within #elements. E.G:

$("#bg").append(function() {
    return $("#elements .el").clone().addClass('res').draggable({
      containment: "#bg"
    });
});

See: http://jsfiddle.net/72b1tLpv/1/

UPDATE:

For some reason I can only append() one instance but I will prepend() as many as I like. (Switch $("#bg").append(function(){ for $("#bg").prepend(function(){ to see for yourself.)

If this is an issue for you you can append it after the first image. IE:

$("#bg img:first").after(function() {

(http://jsfiddle.net/72b1tLpv/2/)