Cloning Input

Thanks http://stackoverflow.com/questions/27829956/unable-to-use-bootstrap-datepicker-on-cloned-rows-value-always-stay-on-first-da

by fido3993

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script>
<table id="id_forms_table" border="0" cellpadding="0" cellspacing="5">
   <thead>
      <tr>
         <th scope="col">&nbsp;</th>
         <th scope="col">Property name</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr id="form-0-row" class="dynamic-form">
         <td> 
   <input class="datepicker" id="id_form-0-expense_date_item" name="form-0-expense_date_item" type="text" />
         </td>
         <td> Column </td>
         <td> Contains </td>
         <td>
            <a id="remove-form-0-row" href="javascript:void(0)" class="delete-row">delete row</a>
         </td>
      </tr>
   </tbody>
</table>
<div>
<button>Add Row</button>
  </div>

JavaScript

<!--

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })
     
function updateElementIndex(el, prefix, index){
     var id_regex = new RegExp('(' + prefix + '-\\d+)');
     var replacement = prefix + '-' + index;
     if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));    
     if (el.id) el.id = el.id.replace(id_regex, replacement);
     if (el.name) el.name = el.name.replace(id_regex, replacement);    
    
}

var i = 1;
$("button").click(function() {
    //Destroy datepickers
	$('.datepicker').datepicker('destroy');
	var myTr = $("#id_forms_table tbody tr:first").clone(false).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
	myTr.removeClass('datepicker').find("input").each(function() {
		$(this).attr({
			'id': function(_, id) { return id + i },
			'name': function(_, name) { return name + i },
			'value': ''
		});
	});
	//myTr.find('input[id^="datep"]').addClass("mydatepickers");
	$(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });
	i++;
});

$(document).on('click', '.delete-row', function() {
    $(this).closest("tr").remove();
    return false;
});

     

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })


 //-->