Datepicker not working in cloned container

Question

Working on accordion cloning using datepicker. I have googled but cloned datepicker not getting the works. When the user clicks the date from the original date it was working as expected But once the user click the addmore button in the cloned accordion the datepicker was not working. I tried removing id, hasDatepicker the result was not coming as expected. It might be the duplicate question but as I said the solution not working in my case.

Here is the jquery code.

$(document).on('click', '.add_more_pets', function(event) {
    var increment = $('.accordion .panel').length;
    var panelCount = increment+1;
    var clone = $('#accordion1 .panel:last-child').clone(true, true);
    $('#accordion1 .panel').find('.panel-heading').addClass("collapsed");   
    $('#accordion1 .panel').find('.panel-collapse').removeClass("in");
    if($('.accordion .panel').length == 4){
        $(".add_more_pets").hide();
    }
    $(clone).find('.delete_expiration').text('Delete');
    $(clone).find('.panel-heading').attr({id: 'heading'+panelCount, href: '#collapse'+panelCount, 'aria-expanded': 'false', 'aria-controls': 'collapse'+panelCount});
    $(clone).find('.panel-title').text("Pet "+panelCount);      
    $(clone).find('input').val("");
    $(clone).find('.panel-collapse').attr({id: 'collapse'+panelCount, 'aria-labelledby': "heading"+panelCount});

   /* *************cloned datepicker************ */

    $(clone).find("input.pet_dob")
                  .removeAttr('id')
                  .removeClass('hasDatepicker')
                  .removeData('datepicker')
                  .unbind()
                  .datepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-60:+0",
                    maxDate : new Date(),
                    inline: true,
                        onSelect: function(selectedDate) {
                            var birthDay = selectedDate;
                            var DOB = new Date(birthDay);
                            var today = new Date();
                            var age = today.getTime() - DOB.getTime();
                            age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
                            $(this).parents('.date_container').next().find('input.pet_age').val(age);
                        }
                });
    $("#count_individual").val(increment);
    $(clone).clone(true, true).addClass('cloned_element').appendTo(".accordion").find("input,select,textarea").attr("name","field_"+increment+"[]");
    increment++;
});

Here is the my working link

Thanks in advance

Answer 1

You have to initialize the datePicker for the clone.

$(clone).datepicker({...})

In order to avoid duplication you can make a function that gets element and initialzie the datepicker,
then use it for the first one and the clones.

function setDatepicker(element){ element.datepicker({...}); }

Answer 2

In your code, you have 2 mistakes:

1. You use clone function too many times, this will make jQuery confused, datetimepicker will not work well on this probably:

   var clone = $('#accordion1.panel:last-child').clone(true, true); ... $(clone).clone(true, true).addClass('cloned_element')...

2. Use datetimepicker('destroy') instead of trying to remove it's event/class yourself

You can take a look at my custom script at line 35 here for more details. Hope this would help Please correct me if I'm wrong.