jquery datepicker on dynamic input fields
<p>I need help with datepicker on dynamic created input fields...</p>

<p>I have this form:</p>

<pre><code>    &lt;table id="reminder"&gt;
                 &lt;tr&gt;
                 &lt;th&gt;Payment Reminders&lt;/th&gt; 
                 &lt;th&gt;&lt;/th&gt;
                 &lt;th&gt;&lt;/th&gt;
                 &lt;th&gt;&lt;/th&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td&gt;&lt;label&gt;Reminder&lt;/label&gt;&lt;/td&gt;                              
                    &lt;td&gt;&lt;input type="text" name="payreminder[]" id="payreminder" class="input1" size="20" &gt;&lt;script&gt;$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); &lt;/script&gt;&lt;/td&gt; 
                    &lt;td&gt;&lt;label&gt;Description&lt;/label&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;input type="text" class="input1" name="paydescription[]" id="paydescription"&gt;&lt;/td&gt;
                    &lt;td&gt; &lt;a href="#" onClick="addReminder('dynamicInputReminder');" title="Add another"&gt;Add another&lt;/a&gt;&lt;/td&gt;
                 &lt;/tr&gt;
                  &lt;tr&gt;
                   &lt;td colspan="6"&gt;&lt;div id="dynamicInputReminder"&gt;&lt;/div&gt; &lt;/td&gt; 

                &lt;/tr&gt;


        &lt;/table&gt;
</code></pre>

<p>And the javascript for adding more reminders is:</p>

<pre><code>&lt;script type="text/javascript" &gt;

 var counterReminder = 1;
 var limit = 20;              
  function addReminder(divName){ 
     if (counterReminder == limit)  {
      alert("You have reached the limit of adding " + counterReminder+ " inputs");
      }
      else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "&lt;td&gt;&lt;label&gt;Reminder&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"text\"  id=\"payreminder["+counterReminder+"]\" name=\"payreminder["+counterReminder+"]\" class=\"input1\" &gt;&lt;/td&gt;&lt;td&gt;&lt;label&gt;Description&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"text\" id=\"paydescription["+counterReminder+"]\" name=\"paydescription["+counterReminder+"]\" class=\"input1\"&gt;&lt;/td&gt;";
      document.getElementById(divName).appendChild(newdiv);
      counterReminder++;
 } 
}
&lt;/script&gt;
</code></pre>

<p>The question is: How and where can I call the script bellow for the date picker so that it works for the dynamically created fields ?</p>

<pre><code>&lt;script&gt;$('#payreminder').datepicker({dateFormat: $.datepicker.W3C, changeMonth: true, changeYear: true, yearRange: '2011:2020'}); &lt;/script&gt;
</code></pre>

<p>Thanks a lot! </p>
