Date Picker for dymically added row not working

Date Picker for dymically added row not working

Dear Sir


please  refer 



Trying to add rows dynamically.
using  following code


  1. $('#addRow').click(function () {
  2.     addItem();
  3. });
  4. function addItem() {
  5. var rowcount=$('#rowcount').val();
  6.     var itemRow =
  7.         '<tr>' +
  8.         '<td><?php echo fillDropDownselect("rawmaterial","name","id",$rawmaterialid," 1 ","rawmaterialid".$_POST["rowcount"],"name","Select raw Material");?></td>' +
  9.         '<td><input type="text" class="form-control update row-quantity number" placeholder="Quantity" size="10";  id="quantity'+rowcount+'"  /></td>' +
  10.         '<td><input type="text" class="form-control update row-rate number" placeholder="Rate" size="10"   id="rate'+rowcount+'"/></td>' +
  11.         '<td><textarea type="text" class="form-control update row-quantity " placeholder="specifications" size="15" id="specification'+rowcount+'"  /></td>' +
  12.         '<td><input type="text" class="form-control update row-deliverydt datepicker  " placeholder="Date" size="10"   id="deliverydt'+rowcount+'"/></td>' +
  13.         '<td><input type="text" class="form-control update row-cost number" placeholder="Cost" size="10"  id="cost'+rowcount+'" disabled="disabled" placeholder="0,00"/></td>' +
  14.  
  15.         '</tr>';
  16.     $("#items_table").append(itemRow);
  17. var rc=parseInt(rowcount);
  18. $('#rowcount').val(rc+1);
  19. }
  20. addItem(); //call function on load to add the first item

  21.  

html part 

  1. <table class="myTable">
  2.     <thead>
  3.         <tr>
  4.             <th>Product</th>
  5.             <th>Quantity</th>
  6.             <th>Rate </th>
  7.             <th>Specification</th>
  8.             <th>Delivery Dt</th>
  9.             <th>Cost</th>
  10.           </tr>
  11.     </thead>
  12.     <tbody id="items_table"></tbody>
  13.     <tfoot>
  14.         <tr>
  15.             <th>Item Name</th>
  16.             <th>Quantity</th>
  17.             <th>&nbsp;</th>
  18.             <th>Tax</th>
  19.             <th>&nbsp;</th>
  20.             <th>Price</th>
  21.           </tr>
  22.         <tr>
  23.           <th>&nbsp;</th>
  24.           <th>&nbsp;</th>
  25.           <th>&nbsp;</th>
  26.           <th>&nbsp;</th>
  27.           <th width="12"> 
  28.             <input name="deliverydate" type="text" id="deliverydate" size="12"   /></th>
  29.           <th><input type="text" class="form-control" id="subTotal" disabled="disabled" placeholder="0,00" /></th>
  30.           </tr>
  31.     </tfoot>
  32. </table>

The 1st row is added properly and date picker is assigned to it properly

however when i add one more row ny clicking   Add a row
button 
date picker doesnot work pls help

  1. <script>
  2.   $( function() {
  3. //  var dateFormat = $( ".datepicker" ).datepicker( "option", "dateFormat" );
  4.  
  5. // Setter
  6.    $( ".datepicker" ).datepicker({ minDate: -30, maxDate: "+2M +1D" } );;
  7.    $( ".datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
  8.     //$( ".datepicker" ).css('background-color','#366');


  9.  
  10.     $( "#items_table    [id*='delivery']" ).datepicker({ minDate: -30, maxDate: "+2M +1D" } );;
  11.     $( "#items_table    [id*='delivery']" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
  12.  // I tried above script for dynamically added row but not working
  13.  
  14.   } );
  15.   </script>