title: Adding datepicker to dynamically added HTML divs
body: <p>I am creating a HTML file which has a button to add new divs dynamically. 
  a div has a label and two input fields. One of the input fields has JQuery datepicker assigned to it.</p>
  
  <p>I have two extra divs created, but they are hidden using CSS. One div of them is used to create clones of it using JQuery. I make clones of that div to add dynamically when the button is clicked. The other div is used to place dynamically created divs correctly. That means all the divs getting generated dynamically are placed before that.</p>
  
  <p>This is my code.</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;TODO supply a title&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
          &lt;!-- for date picker --&gt;
  
          &lt;!-- Load jQuery from Google's CDN --&gt;
          &lt;!-- Load jQuery UI CSS  --&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  
          &lt;!-- Load jQuery JS --&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;!-- Load jQuery UI Main JS  --&gt;
          &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  
          &lt;script&gt;
              $(function() {
                  $(".dpick").datepicker();
              });
          &lt;/script&gt;
  
          &lt;!-- /for date picker --&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="onBookingDiv"&gt;
              &lt;label id="Paylbl0"&gt;Payment No 0: &lt;/label&gt;
              &lt;input type="text"  style="width: 30%;" class="dpick" id="dpick0" &gt; 
              &lt;input type="number" style="width: 30%;" id="amount0"&gt;
          &lt;/div&gt;
          &lt;div id="Pay1Div"&gt;
              &lt;label id="Paylbl1"&gt;Payment No 1: &lt;/label&gt;
              &lt;input type="text"  style="width: 30%;" class="dpick" id="dpick1"&gt; 
              &lt;input type="number" style="width: 30%;" id="amount1"&gt;
          &lt;/div&gt;
          &lt;div id="Pay2Div"&gt;
              &lt;label id="Paylbl2"&gt;Payment No 2: &lt;/label&gt;
              &lt;input type="text"  style="width: 30%;" class="dpick" id="dpick2"&gt; 
              &lt;input type="number" style="width: 30%;" id="amount2"&gt;
              &lt;button type="button" onclick="AddNew()"&gt;Add New&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- this div is used to correctly place the cloned div --&gt;
  
          &lt;div id="placeDiv" style="display: none"&gt;
              &lt;label&gt;Plcment No x: &lt;/label&gt;
              &lt;input type="text"  style="width: 30%;" class="dpick"&gt; 
              &lt;input type="number" style="width: 30%;" &gt;
          &lt;/div&gt;
  
          &lt;!-- /this div is used to correctly place the cloned div --&gt;
  
          &lt;!-- this div is used to make the clone --&gt;
  
          &lt;div id="makeCloneID" class="makeCloneClass" style="display: none"&gt;
              &lt;label class="lbl"&gt;Payment No x: &lt;/label&gt;
              &lt;input type="text"  style="width: 30%;" class="dpick"&gt; 
              &lt;input type="number" style="width: 30%;"&gt;
          &lt;/div&gt;
  
          &lt;!-- /this div is used to make the clone --&gt;
  
  
          &lt;script&gt;
              var i = 3;
              function AddNew() {
  
                  var cloned = $('#makeCloneID').clone(true);
                  cloned.css({"display": 'block'});
  
                  var noOfDivs = $('.makeCloneClass').length + 2;
  
                  cloned.attr('id', 'Pay' + noOfDivs + 'Div');
                  cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
                  cloned.find('input[type="text"]').attr('id', 'dpick'+ noOfDivs);
                  cloned.find('input[type="number"]').attr('id', 'amount'+ noOfDivs);
  
                  cloned.find('.lbl').html("Payment No " + i++ + ':');
  
                  cloned.insertBefore("#placeDiv");
              }
          &lt;/script&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problems are </p>
  
  <ol>
  <li><p>Once the first clone(in this case Payment No:3) is created and placed, When I click the input field to enter the date, I cannot enter the date there although the calendar is shown.</p></li>
  <li><p>Once I create the second clone(in this case Payment No:4) is created, the day which was picked in earlier step is placed in the field already.</p></li>
  <li><p>All the other divs getting cloned after above steps takes the same date which was picked in the earlier step.</p></li>
  </ol>
  
  <p>If you can be kind enough to run my code you will see what the issues are. It is bit difficult to describe them.</p>
  
  <p>Could you please point out what is the bug in my code and how to get it corrected.</p>