Add table row , table data contain drop down which populate from database - php

Question

Add new table row with category, item, measurement, price. I was able to add a new row but was unsure how to populate drop-down data from the database. I have to fetch data for the first row. This is my code.
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>
<select id="catid" name="catid[]">
<option value="">Select Category</option>
<?php
$getcatid = "SELECT catid,catname FROM category";
$result = mysqli_query($conn,$getcatid);
while($row = mysqli_fetch_array($result)){ ?>
<option value="<?php echo $row['catid']; ?>"><?php echo $row['catname']; ?></option>
<?php }?>
</td>
<td>
<select id="itemid" name="itemid[]">
<option value=''>Select Item</option>
</select>
</select>
</td>
<td>
<select id="msr" name="msr[]" onchange="showPrice(document.cument.getElementById('itemid').value,this.value)">
<option value=''>Measurement</option>
</select>
</td>
<td><div id="price"><input type="text" name="price[]"></div></td>
<td><input type="text" name="qty[]"></td>
<td><input type="text" name="total[]"></td>
</tr>
</tbody>
This is my script for add & remove row
$(document).ready(function(){
$("#add-row").click(function(){
var markup = "<tr><td><input type='checkbox' name='record'></td><td><select name='proid' id='proid'></select></td><td><select></select></td><td><select></select></td><td><input type='text name=''></td><td><input type='text' name=''></td><td><input type='text name=''></td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$("#delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});

Answer 1

Try this code.
You need to use clone() in jquery.
Here is the jquery script and added working fiddle link.
Fiddle Link
$(document).on("click","#add-row", function(){
var markup = $("table tbody>tr:last").clone();
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(document).on("click","#delete-row", function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});