Question

I have draggable items that can be cloned. I wanted each clone to be unique so each of them can be inserted into our database (with coordinates, which will be done later on).

 $(document).ready(function() {
    cntb1 = 0;
    cntb2 = 0;
    cntb3 = 0;
 $(".droppable").droppable({
    accept: '#b1, #b2, #b3',        
        drop: function(event, ui) {
        if(ui.draggable.attr('id')=='b1'){
                cntb1++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b1c'+cntb1); //change id
                $("#status1").append('b1c'+cntb1);
            }
        else if(ui.draggable.attr('id')=='b2'){
                cntb2++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b2c'+cntb2); //change id
                $("#status2").append('b2c'+cntb2);
            }
        else if(ui.draggable.attr('id')=='b3'){
                cntb3++;    //counts clones
                $(this).append($(ui.helper).clone());               
                $(".droppable .drag").addClass("component");
                $(".component").removeClass("drag");
                $(".component").resizable({aspectRatio: 'true' }).parent().draggable({ //parent() -> both draggable & resizable work
                        containment: '.droppable', //cursor: 'move', grid: [3,3]                        
                }).attr('id', 'b3c'+cntb3); //change id
                $("#status3").append('b3c'+cntb3);
            }

    }
}); 

$(".drag").draggable({ 
            helper:'clone', 
            appendTo: 'body', //para maka drag padung gawas sa accordion
            cursor: 'move' 
            });
$( "#accordion" ).accordion({                   
            autoHeight: false,                  
            collapsible: true,
            active: false
});
});

But the problem is that whenever i create a new clone the ID of the old clone gets replaced with the ID of the new one. I tested it by styling ID’s like this:

        #b1c3{ background:#00FF00; }
        #b1c2{ background:#CCFF00; }

My HTML is like this btw:

    <div id="accordion">
 <h3><a href="#">Buttons</a></h3>   
     <div class="div-table">         
        <div class="div-table-row">
        <div class="div-table-col"><img src="button_final/button_1.gif" id="b1" class="drag"/></div>
        <div class="div-table-col"><img src="button_final/button_2.gif" id="b2" class="drag"/></div>
        <div class="div-table-col"><img src="button_final/button_3.gif" id="b3" class="drag"/></div>
        </div>
          </div>
</div>
<div id="frame" style="border:dotted; height:500px; width:60%; float:left" class="droppable">
<h3 id="status1" style="height:30%;"></h3>
<h3 id="status2" style="height:30%;"></h3>
<h3 id="status3" style="height:30%;"></h3></div>

ps. I assembled everything with the help of people here. I owe you my life!

Answer 1

This should work for sure,the change is that u have to assign an id at the time of appending it to droppable,previously u were assigning id to all the elements with component class which is wrong in your case.
so the only change will be :

 $(this).append($(ui.helper).clone().attr("id",'b1c'+cntb1));