使用jQuery Ajax动态添加输入字段

Question

我正在尝试插入多个与数量和价格相关的商品。所有项目将显示相同的发票编号和供应商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>

所以我正在尝试按照教程使用jQuery ajax动态添加输入字段，但我似乎无法使其工作

当我单击“添加”以添加字段时，仅链接更改为/admin/addinvoice.php?invoicenumber=&vendorid=+2+&proid[]=+10+&tquantity[]=&saleprice[]=&add= 并且没有添加字段