jQuery Datepicker does not work in dynamic element - php

Question

I have a problem. jQuery Datepicker does not work in a dynamic form, so you can't pick a date. Here is my demo link http://gestionale.odoyabooks.com/sum.php.
JavaScript:
<script>
$(document).ready(function() {
$('.input_date').on('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
</script>
HTML:
<form action="" method="POST">
<div class="yes">
<div id="cost1" class="clonedCost" style="display: inline;">
<table border="0">
<tr>
<td><label class="date" for="date">Date</label></td>
</tr>
<tr>
<td><input class="input_date" id="date" type="text" name="date[]" /></td>
</tr>
</table>
</div>
<div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>
</form>

Answer 1

The problem is that when you bind the event initially, the new field doesn't exist.
By applying the on click to the body, with the selector .input_date, it should attach the event to the new element in the dynamic form.
$(function() {
$('body').on('click','.input_date', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
Working Example
A better way:
You should initialize the datepicker for the field when you create the element.
$(function() {
$('.input_date').datepicker();
});
function createNewDatepickerInput() {
var $newInput = $('<input type="text" name="date123" class="input_date" />');
$newInput.appendTo("form").datepicker();
}
Working Example

Answer 2

I don't understand why you're destroying/re-initializing the datepicker.
You simply need to call .datepicker() after creating the element. For example:
function createInput() {
$('<input type="text" name="date" />').appendTo("form").datepicker();
}
Edit:
Here's a demo: http://jsfiddle.net/xEmJu/