Unable to use bootstrap-datepicker on cloned rows. Value always stay on first date field

Question

I found this issue when trying to clone a row using bootstrap-datepicker and bootstrap.

Steps to reproduce: 1. Upon selecting the first input date(id_form-0-expense_date_item) user is able to select the date. 2. Adding another row and selecting second input date user is shown again with the datepicker however when date is select value goes to the first input field. id_form-0-expense_date_item

I am able to clone rows but calendar date stays always on the first field (id_form-0-expense_date_item). When using jQuery UI 1.10.3 it works fine.

example here: http://jsfiddle.net/uoyzbwro/9/

<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>

===

<!--

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

 })

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');
    myTr = $("#id_forms_table tbody tr:first").clone(true).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
    myTr.removeClass('hasDatepicker').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();
    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,
            startDate: new Date()
     });

 })


 //-->

Answer 1

As recommended by charlietfl I've changed clone(true) to false and have reinitialized datepicker on the new row as seen below.

http://jsfiddle.net/uoyzbwro/11/

 $(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');
    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,
     });

 })