invoking javascript for a input text which is part of dynamically added row in a table
<p>I need to have a datetimepicker to popup onclick of the date input fields, the date pickers are defined in a javascript function like this:</p>

<pre><code>  function loadcalendar(){
   jQuery(function() { 
                            $('#ar_startdate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
                            $('#ar_enddate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
          });
 } 
</code></pre>

<p>now I am calling load calendar when I populate the input fields into table row dynamically just after they are appended as rows to a table 
Something like this:</p>

<pre><code>// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
    $("#table_newrole img.move-row").live("click", function() {
     $("#table_rolecart tbody").append('&lt;tr&gt;&lt;td&gt;Start Date: &lt;input type="text" value="" id="ar_startdate"&gt;&lt;/td&gt;&lt;td&gt;End Date: &lt;input type="text" value="" id="ar_enddate &lt;/td&gt;&lt;/tr&gt;');
   loadcalendar();
</code></pre>

<p>With the above setup the datepickers get displayed only in first iem as right all input text fields share the same id, so how do I create an id from an index and associate each with the datepicker after that row is appended .
Regards,
Priyank</p>
