Dynamically added rows don't catch js code

Question

I'm having some issues with dynamic tables and js code

Here's the table

<table class="table table-bordered table-striped responsive-utilities" id="m1r2">
 <thead>
  <tr>
   <th data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"> <?php echo $lang['m1r7Auditores']; ?> </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>">
  <select class="select2 m-b-10 select2-multiple"  multiple="multiple" data-placeholder="Seleccione" name="m1r7Auditores1[]">
   <?php foreach ($auditores as $aud ): ?>
    <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>
   <?php endforeach; ?>
  </select> -
 </th>
</tr>
</tbody>
</table>

And the JS to add more rows is like this

$(document).ready(function() {
 $('#btnAdd').click(function() {
  var num = document.getElementById('cuantos').value;
  var num2 = 1;
  var sum = Number(num) + num2;

  document.getElementById("m1r2").insertRow(-1).innerHTML = '<tr>' +
  '<th scope="row" data-toggle="tooltip" title=" <?php echo $lang['m1r7AuditoresPlace'] ; ?>"><select  multiple="multiple" name="m1r7Auditores1[]">' +
  '  <?php foreach ($auditores as $aud ): ?>' +
  '    <option value="<?php echo $aud->userRut; ?>"><?php echo ''.$aud->userRut.'</option>' +
  '  <?php endforeach; ?>' +
  '</select></th>' +
  '</tr>';

The result its the first one working like a charm, but then, when I add some rows they came plain (no style, no js) as image shown

Thanks in advance for the help :)!

Answer 1

problem solved! if anyone got the same issue, the js DOM wasnt re declared afte the tr was duplicated, so I just added

$('#select'+ sum +'').multiSelect();

at the end of the code shown above :)