Adding a dropdown from database in a form

My questions are in the end of this referred as MY PROBLEMS. Please read the questions before you try to go through all the things I have written, so that I don't waste so much of your time.

I have a form where I need to enter certain values as

ITEM | QUANTITY | PRICE | DISCOUNT | TOTAL

Item 1 | 1 | 100 | 05 | 95

Item 2 | 4 | 250 | 10 | 900

Add more

Total : 995

• On clicking the 'Add more' link, a new set of same input fields appear, and so forth.
• Each subtotal is automatically calculated (95 and 900 in this case).
• These sub totals are automatically added to get the final total (995 in this case).

The script I use to have the 'Add more' functionality is the following

<script>
 $(document).ready(function() {
 var InputsWrapper = $("#InputsWrapper");
 var AddButton = $("#AddMoreFileBox");
 var x = InputsWrapper.length;
 var FieldCount = 1;
    $(AddButton).click(function(e){
                FieldCount++;
                $(InputsWrapper).append('<tr><td><input class="item" type="text" name="item[]"></td><td><input class="qty" type="number" name="qty[]"></td><td><input class="price" type="number" name="price[]"></td><td><input class="discount" type="number" name="discount[]">%</td><td><input class="total" type="number" name="total[]" readonly ></td></tr>');
                x++;
                return false;
            });
 });
</script>

The following is the form I have.

<table id="InputsWrapper">
            <tr>
            <span class="small"><a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
                        <tr>
                            <td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
                        </tr>
                        <tr>
                            <td><input class='item' type='text'  name='item[]'></td>
                            <td><input class='qty' type='number' name='qty[]'></td>
                            <td><input class='price' type='number' name='price[]'></td>
                            <td><input class='discount' type='number'  name='discount[]'>%</td>
                            <td><input class='total' type='number' name='total[]' readonly></td>
                        </tr>
                        <tr>
                            <td><input id='totaldp' type='number' name='totaldp' readonly</td>
                        </tr>
</table>

Now, I need to have an extra field called tax, which will be fetched using a drop down populated from a database with tax values. I need this tax value also to be displayed against each item as a dropdown

ITEM | QUANTITY | PRICE | DISCOUNT | TAX | TOTAL

This is the code I use to make the dropdown in the form

<td>
  <?php 
     $query = mysqli_query($con, "SELECT * FROM `tax`");
     echo '<select name="vat" class="vat">';

     while ($row = mysqli_fetch_array($query)) {
     echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
     }

     echo '</select>';
  ?>
</td>

And in the script, I add class="vat" type="number" name="vat[]"

MY PROBLEMS:

1. Doing this way, I get the dropdown only once. Clicking the 'add more' field gives only an empty dropdown.
2. If anyone could help, let me know how.
3. I think this is very inefficient and stupid way of doing it, so if there is a better way, please let me know.