title: How to display calender on cloned form using jquery
body: <p>I have an date input area using Bootstrap-dateinput</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
     &lt;div class="col-xs-8"&gt;
        &lt;label class="control-label"&gt;Date&lt;/label&gt;
        &lt;div class="input-group date" id="dp3" data-date="12-02-2014" data-date-format="mm-dd-yyyy"&gt;
           &lt;input class="form-control" type="text" required="" placeholder="Date"  name="date[]" value=""&gt;
           &lt;span class="input-group-addon"&gt;
           &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
           &lt;/span&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery Script To clone this form:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $( document ).on( 'click', '.btn-add', function ( event ) {
              event.preventDefault();
  
              var field = $(this).closest( '.form-group' );
              var field_new = field.clone();
  
              $(this)
                  .toggleClass( 'btn-default' )
                  .toggleClass( 'btn-add' )
                  .toggleClass( 'btn-danger' )
                  .toggleClass( 'btn-remove' )
                  .html( '-' );
  
              field_new.find( 'input' ).val( '' );
              field_new.insertAfter( field );
          } );
  
      &lt;/script&gt;
  </code></pre>
  
  <p>And Script to display calender:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.input-group .date').datepicker({
  ...
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But when New input area is created it do not show calender when clicked</p>
  
  <p>I tried adding onclick </p>
  
  <pre><code>$(".input-group .date").click(function(){
  $('.input-group .date').datepicker({
  ...
  });
  </code></pre>
  
  <p>But yet seems there is some problem Can you please tell whats wrong and how to fix it ?</p>