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 later
    var stemcell = $('.myRow:eq(0)').clone().wrap('<div>').parent().html();

    $('#clone').click(function(){
        // retrieve the clone
        var 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 field
            var 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; 
    
}

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

            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="bdate">Age:</label>
                <input type="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