add input fields dynamically using jquery ajax - php

Question

I'm trying to inserting multiple items connected with quantity and price for each. all of the items will be showing the same invoice number and vendor id.
<form name="order" id="order">
<label>Invoice Number</label>
<input type="text" name="invoicenumber" value="">
<p><label>Vendor's ID</label>
<select name="vendorid" >
<?php
$stmt = $dbcon->prepare("SELECT * FROM customers");
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
?>
<option value=" <?php echo $id; ?> "><?php echo $vendorname; ?></option>
<?php
} ?>
</select> </p>
<table class="table table-bordered" id="dynamic_field">
<!-- Product code begining -->
<td><tr><label>Items sold</label>
<select name="proid[]" >
<?php
$stmt = $dbcon->prepare("SELECT * FROM products");
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
?>
<option value=" <?php echo $pid; ?> "><?php echo $pname; ?></option>
<?php
} ?>
</select> </td>
<td><label>Quantity</label>
<input type="text" name="tquantity[]" value=""></td>
<td><label>Price</label>
<input type="text" name="saleprice[]" value=""></td>
<td><button name="add" id="add" class="btn btn-success">ADD MORE</button></td></tr>
</table>
<!-- Product code END -->
<input type="submit" name="submit" value="submit">
</form>
<!--Jquery code to add more fields -->
<script>
$(document).ready(function(){
var i = 1;
$(#add).click(function(){
i++;
$(#dynamic_field).append('<tr id="row'+i+'"><td>
<select name="proid[]" >
<?php
$stmt = $dbcon->prepare("SELECT * FROM products");
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
?>
<option value=" <?php echo $pid; ?> "><?php echo $pname; ?></option>
<?php
} ?>
</select> </td>
<td><label>Quantity</label>
<input type="text" name="tquantity[]" value=""></td>
<td><label>Price</label>
<input type="text" name="saleprice[]" value=""></td>
<td><button name="remove" id="remove" class="btn btn-danger btn_remove">Remove</button></td></tr>');
});
$(document).on('click','.btn_remove',funcion(){
var button_id= $(this).attr("id");
$("#row"+button_id+"").remove();
});
$(#submit).click(function(){
$.ajax({
url:"processinvoice.php",
method:"POST",
data:$('#order').serialize(),
success:function(data){
alert(data);
$('#order')[0].reset();
}
});
});
}
</script>
So I'm trying to add input fields dynamically using jQuery ajax following a tutorial but i can't seem to make it work
When I click add to add fields only the link changes to /admin/addinvoice.php?invoicenumber=&vendorid=+2+&proid[]=+10+&tquantity[]=&saleprice[]=&add=
and it's not adding a field