使用javascript复制表格行时，不显示输入字段

Question

I am working with table where copy a table row using javascript issue is that when i click on add more button then copy a table row but input fields are not showing here is my code of table

<table class="striped display" cellspacing="0" width="100%" id="myTable">
  <tbody>
    <tr>
       <td class="input-field col s2">
       <label>Module</label>
          <select  data-rel="chosen" name="moduleid[]" class="form-control">
              <?php 
                $RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
                while($URow=mysqli_fetch_array($RowRes)){
                echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
          </select>                 
        </td>
        <td class="input-field col s2">
           <label>Week Days</label>
             <select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
              <option value="1">Monday</option>
              <option value="2">Tuesday</option>
              <option value="3">Wednesday</option>
              <option value="4">Thursday</option>
              <option value="5">Friday</option>
             </select>
          </td>
      <td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
     </tr>
</tbody>

and here is the javascript code where append a table row on button click

<script type="text/javascript">
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
    i++;
   $('#myTable tbody').append('<tr id="row'+i+'"><td class="input-field col s2"><label>Module</label><select data-rel="chosen" name="moduleid[]" class="form-control"><?php$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");while($URow=mysqli_fetch_array($RowRes)){echo "<option value=".$URow[0].">".$URow[1]."</option>";}?></select></td><td class="input-field col s2"><label>Week Days</label><select  data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple"><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option></select></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');

   $('.btn_remove').click(function(){ 
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });
});

});

Here is the image of issue

see that first row of table input fields are working perfectly but second row of table that copy when click on Add More button input fields are not working

Answer 1

You can just use JQuery to achieve what you want with the clone method and remove the embeded PHP code.

A simple fiddle can be found here https://jsfiddle.net/xpvt214o/809590/ that merely updates the id of the main <tr> itself. But the code looks as follows:

       $(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
    i++;
    $clone = $('#first').clone(true);
    $clone.attr('id', "row" + i);

    $clone.find('.btn_remove').attr('data-remove-id', 'row'+i);
   $('#myTable tbody').append($clone);


});

$('#myTable').on('click','.btn_remove',function(){ 
       var button_id = $(this).data("remove-id");  
       $('#'+button_id+'').remove();  
  });

});

The only id i'm manipulating here is the id of the table row itself. But using jQuery selectors you can change the ids etc. of any of the cloned elements.

I do have a sneaky suspicion your current code won't work as expected, as even in your example all the form inputs have the same names (you only seem to be updating the id of the table row). You may want to make the form names themselves more dynamic by appending the i elsewhere. But that is obviously a different question.

You might also want to consider just having one "Add more" button at the bottom of all the forms, rather than duplicating that as they all have the same id as well. And you don't want to end up with any unintended consequences bearing in mind the click handler is associated with that element.