To generate a cloned div with html controls , dynamic ID and listeners for the elements in DIV

Question 1

After a Long Search I found a working code which does what I wanted. Kindly refer the link

<div id="events_wrapper">
<div id="sub_events">
<p><label>Art Space </label>
<input type="text" id="as_name" name="as_name" class="txt-input small"/>
<input type="hidden" id="as_id" name="as_id" class="txt-input small"/>                                      
</p>

<p><label>Start Date </label>
<input type="text" id="start_date" name="start_date" class="datepicker txt-input small"/>

<label>End Date </label>
 <input type="text" id="end_date" name="end_date" class="datepicker txt-input small" />
</p>

<p><label>Opening Hours </label>
 From : <input style="width: 100px" type="text" id="time_from" name="time_from" class="timepicker txt-input small" />

To : <input style="width: 100px" type="text" id="time_to" name="time_to" class="timepicker txt-input small"/> </p>                                                    
</div>
     <br/>
<input type="button" id="add_another_event" name="add_another_event" value="Add Another" />

JS Function:

$('#add_another_event').click(function() 
    {
        alert('test');var $address = $('#sub_events');
        var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
        var newNum = num + 1;
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each (function (i) {
            this.id = 'input' + (newNum*5 + i);
        });

        newElem.find('input').each (function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }

        $('.datepicker', newElem).removeClass('hasDatepicker').datepicker();
        $('#btnDel').removeAttr('enabled'); 
    });       

$('.datepicker').datepicker();

Also Refer Jquery date picker and time picker do not work when fields are dynamically created

Hope this will help some one.!

Working Example of the above code: http://jsfiddle.net/MkhZ2/24/

Question 2

You can do it by using jQuery's .clone() method. Consider the following code :

//first clone your div
clonedDiv = $('#IdOfYourDIV').clone();

//use .attr() method to change the id
$(clonedDiv).attr('id','YourDynamicID');

Now your 'cloned' div is ready. But the handlers binded using the ID of the first div won't work on the clonedDIV.

Question 3

I was dev something like this so my solution was very simple. Use clone to duplicate your div and appentTo set assuming the div are contained by body.

$("#btn_act").click(function(){
   var body = $("body"); //Where is contained the object
   var obj = $("#myDiv"); //Object who will be cloned
   var e = obj.clone(true).appendTo(body);
   $(e).find("input").each(function(){
       //ie: myInput0, myInput1 will be deleted
       if ($(this).attr("id") != 'myInput'){
          $(this).remove();
       }
   });
});

Think this would help you if you still need an small solution.

Question 4

function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

not duplicetor but duplicater :) then it will not show an error in console and add a cloned div

why wouldn't it clone input fields? it will clone it...