Dynamic Drag and drop

HTML

<div id="myDiv1" class="draggable">Move me<input id="myUrl1" type="hidden" value="Car Image 1" />
</div>
<div id="myDiv2" class="draggable">Move me
    <input id="myUrl2" type="hidden" value="Car Image 2" />
</div>
<div style="clear:both"/>
<div id="containerOne" class="dragcontainer">Front 3/4<div class="imageDiv"></div></div>
 <div id="containerTwo" class="dragcontainer">Rear 3/4<div class="imageDiv"></div></div>
<div style="clear:both"/>
<div id="photos"></div>

CSS

.draggable {
    width: 100px;
    padding: 10px;
    border: 1px solid red;
    background-color: yellow;
    float: left;
}
.dragcontainer {
    height: 115px;
    width:115px;
    float:left;
    border: 1px solid blue;
}

JavaScript

$(".draggable").draggable();
$(".dragcontainer").droppable({
    drop: function (event, ui) {
        var $target = $(this);
        var $source = ui.draggable;
        var newUrl = $source.find("input").val();
        alert("dropped on " + $target.attr("id") + ", setting URL to " + newUrl);
    }
});

  for (var i = 0; i < 3; i++) {
                    var photo = '<div class="draggable">Move me added <input id="myUrl1" type="hidden" value="added" />';
                    $("#photos").before(photo);

      
                }