In this code, I have used jquery date picker. Me calculating age based on dob. when added dynamically age is not calculating. Please help me. Same age is displaying both fields
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> School Registration Form </title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
var runBindings = function () {
//Student date of birth
$('.add_event').unbind('click');
$('.addanother').click(function () {
if ($(this).text().indexOf('-') > -1) {
$(this).parent().remove();
return;
} else {
// var new_comm = $(this).closest('.details').clone(true).insertBefore($(this).parent());
var new_comm = $(this).closest('.details').clone(true).insertAfter($(this).parent());
if ($(new_comm).find('.class_event').length > 1) {
console.info('There are more than one.');
$(new_comm).find('.class_event').slice(1).remove();
}
$(new_comm).find('input,select').val('');
$(new_comm).find('.datepicker').attr('id', "datepicker" + Math.random() * 10000);
$(new_comm).find('.datepicker1').attr('id', "datepicker1" + Math.random() * 10000);
$(new_comm).find('.addanother').text('-');
bindDatePicker();
bindDatePicker1();
}
});
$('.add_event').click(function () {
if ($(this).text().indexOf('-') > -1) {
$(this).parent().remove();
return;
}
var new_comm = $(this).closest('.class_event').clone(true).insertBefore($(this).parent());
$(new_comm).find('input,select').val('');
$(new_comm).find('.datepicker').attr('id', "datepicker" + Math.random() * 10000);
$(this).text('-');
bindDatePicker();
});
bindDatePicker();
bindDatePicker1();
};
var bindDatePicker = function () {
$('.datepicker').datepicker('destroy');
$('.datepicker').datepicker();
};
var bindDatePicker1 = function () {
$('.datepicker1').datepicker('destroy');
$(".datepicker1").removeData('datepicker');
$('.datepicker1').datepicker({
onSelect: function (value, ui) {
var age = new Date(new Date - new Date(value)).getFullYear() - 1970;
$('.age').val(age);
},
yearRange: "-100:+0",
changeMonth: true,
changeYear: true});
};
$(document).ready(function () {
runBindings();
});
</script>
</head>
<body>
<pre id="result">
</pre>
<div class="details">
<div>
<div>
Date Of Birth
</div>
<input type="text" class="datepicker1" id="parent_dob" name="parent_dob[]" />
<label> Age
<input type="text" class="age" name="age" placeholder="Age" size="4" />
</label>
<div class='class_event'>
<select id="class_event_type" name="class_event_type"></select>
<input type='text' class="datepicker" name="class_event_date[]" placeholder="Event Date" />
<button class="add_event" name="add_event">
+
</button>
</div>
<button class="addanother" name="addanother">
+
</button>
</div>
</div>
</body>
</html>