Age Does Not Output In The Field

I am cloning a div which includes a datepicker. I have fixed the datepicker when cloned using: // Re-initialize the datepicker $('.datepicker').each(function() { // Remove the c

Solution 1:

I would ditch the ids with dynamically generated elements and use a class with jQuery's eq(). Also, I'd store a clone of the elements before adding the datepicker to avoid having to remove and re-add them.

$(function () {
    // make a clone of the elements before adding the datepicker and store  html// this way you dont have to deal with removing and re-adding the datepicker latervar stemcell = $('.myRow:eq(0)').clone().wrap('<div>').parent().html();

    $('#clone').click(function(){
        // retrieve the clonevar clone = $(stemcell);
        clone.find('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '-150:+0'
        });
        $('.myContainer').append(clone);
    });

    // initialize the datepickers present on load
    $('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        yearRange: '-150:+0'
    });
    // bind change event 
    $('.myContainer').on('change', '.datepicker', function () {
        var birthdate = moment($(this).val());
        var age = Math.floor( moment().diff(birthdate, 'years', true));
        if (age < 1) {
            alert("Age value is invalid.");
        } else {
            // get index of chaneged co_birthdate fieldvar cur = $('.co_birthdate').index($(this));
            // set age to the co_age element at the same index
            $('.co_age').eq(cur).val(age);
        }
    });
});

 

.myRow{
   margin-bottom:20px; 
    
}

<linkhref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script><inputtype="button"id="clone"value="Clone Elements"/><br><br><divclass="myContainer"><divclass="myRow"><divclass="col-sm-4"><divclass="form-group  custom-addon-holder"><labelfor="bdate">Birthdate:</label><inputtype="text"class="form-control datepicker co_birthdate"class='co_birthdate'placeholder="YYYY / MM / DD"name="co-buyer1[co_birthdate]"title="Birthdate" /><spanclass="input-group-addon custom-addon"><iclass="fa fa-calendar"></i></span></div></div><divclass="col-sm-4"><divclass="form-group"><labelfor="bdate">Age:</label><inputtype="text"class="form-control required co_age"name="co-buyer1[co_age]"class='co_age'title="Age"readonly /></div></div></div></div>

Solution 2:

where you define ID $("#co_age" + counts) in HTML format.?? I think you define only ("#co_age") but added counts in ID string not found