Can't add datetimepicker in dynamically added table rows via JQUERY

Question

I am working on a project where I am finding difficulty in adding datetimepicker to dynamically added table rows. I have added datetimepicker to static table rows and it is working fine for them but not working for dynamically added table rows.

The tutorial I am following for datetimepicker

https://eonasdan.github.io/bootstrap-datetimepicker/

My Code I tried: I am cloning hidden rows.

Row Clone function:

      // Table Add Function
      $('.table-add').click(function () {

        var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
        hid = $TABLE.find('tr.hide').attr('id');
        // //Assigning every table row a unique ID
        var max=0;
        $('table').find('tr').each(function(){
            var id=parseInt($(this).attr('id'));
            if (id>=max){
               max = id;
             }
         });

         //cloning row with new ID  
         $clone.attr('id', parseInt(max)+1);
         //always assign new id to new table row, will be easy to recognize rows
         $clone.find('input.myinput').attr('id', parseInt(max)+1);

         $clone.find("[name='datepicker']").datetimepicker();
         //$("[name='datepicker']").datetimepicker();

         $hiddentr = $('table').find('tr.hide');

         //add dynamic word picker to cloned rows dynamically
         $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
         $clone.appendTo( $('#'+hid).parent());
         //submitting form after row clone
         submitForm();
      });

HTML of hidden td:

           <td> <div style="position: relative"> <input class = "form-control" type= "text" name = "datepicker" 
            id= "datetime"></div> </td> 

Answer 1

My guess... Is that the element has to be in the DOM to instantiate datetimepicker...

So keep the clone ID in a variable, so you can use it to lookup for the right datepicker element. Append the row. And finally instantiate datetimepicker.

// Table Add Function
$('.table-add').click(function () {

  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');            
  hid = $TABLE.find('tr.hide').attr('id');
  // //Assigning every table row a unique ID
  var max=0;
  $('table').find('tr').each(function(){
    var id=parseInt($(this).attr('id'));
    if (id>=max){
      max = id;
    }
  });

  //cloning row with new ID
  var cloneID = parseInt(max)+1;

  $clone.attr('id', cloneId);
  //always assign new id to new table row, will be easy to recognize rows
  $clone.find('input.myinput').attr('id', parseInt(max)+1);

  $hiddentr = $('table').find('tr.hide');

  //add dynamic word picker to cloned rows dynamically
  $clone.find('td:nth-last-child(4)').after('{% if obj.word_picker == "Y" %} <td><input id="wordpicker" style="border:none"; data-role="tagsinput" class="myinput" name="unique_tag"/></td>{% endif %}');
  $clone.appendTo( $('#'+hid).parent());

  // Use the clone ID to instantiate datetimepicker
  $("#cloneID").find("[name='datepicker']").datetimepicker();

  //submitting form after row clone
  submitForm();
});