title: Having to manually define number of datepickers in HTML
body: <p>So I have a working form in my Grails app where there are 4 instances of <code>&lt;td&gt;&lt;g:textField id="datepicker" .../&gt;&lt;/td&gt;</code> but I've had to manually define the id's as</p>
  
  <pre><code>...
  &lt;td&gt;&lt;g:textField id="datepicker1" .../&gt;&lt;/td&gt;
  ...
  &lt;td&gt;&lt;g:textField id="datepicker2" .../&gt;&lt;/td&gt;
  ...
  &lt;td&gt;&lt;g:textField id="datepicker3" .../&gt;&lt;/td&gt;
  ...
  &lt;td&gt;&lt;g:textField id="datepicker4" .../&gt;&lt;/td&gt;
  ...
  </code></pre>
  
  <p>With the head of the HTML (in my GSP) containing</p>
  
  <pre><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;script type="text/javascript"&gt;
    $(function() {
      $("#datepicker1").datepicker();
      $("#datepicker2").datepicker();
      $("#datepicker3").datepicker();
      $("#datepicker4").datepicker();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a way I can do this where I don't have to pre-define how many datepickers there are on the page, assign the <code>datepicker#</code> to each, and it just pops the calendar up no matter which date text box I click on? </p>
  
  <p>Doing just one <code>#datepicker</code> in the head and trying to use <code>&lt;td&gt;&lt;g:textField id="datepicker" .../&gt;&lt;/td&gt;</code> on each does not currently work.</p>