Clash Royale CLAN TAG#URR8PPP

Input fields are not showing when copy a table row using javascript

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

<tr></tr>

<tr id="row'+i+'"></tr>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.