Multiple drop locations - JQueryUI

Question

So I have multiple JQuery draggable items with id="draggable" and multiple droppable items with id="droppable". I want every draggable item to be able to be dropped into every "droppable" item. However, with the code I have only the first droppable item is treated as an acceptable drop location. Below is my code:

HTML:

<div id="draggable"> Drag 1 </div>
<div id="draggable"> Drag 2 </div>
<div id="draggable"> Drag 3 </div>
<div id="droppable"> Drop 1 </div>
<div id="droppable"> Drop 2 </div>
<div id="droppable"> Drop 3 </div>

JQuery:

$('#draggable').draggable({
    helper:"clone",
    containment:"document",
    zIndex: 100
});

$('#droppable').droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

Answer 1

Add classes to those div's. IDs must be unique.

<div class="draggable"> Drag 1 </div>
<div class="draggable"> Drag 2 </div>
<div class="draggable"> Drag 3 </div>
<div class="droppable"> Drop 1 </div>
<div class="droppable"> Drop 2 </div>
<div class="droppable"> Drop 3 </div>

Then:

$('.draggable').draggable({
    helper:"clone",
    containment:"document",
    zIndex: 100
});

Same for the droppable ones.