Javascript AJAX-Post表行和单个输入

我在Laravel有一个项目，其中一部分需要我通过模式提交表单，问题是我对AJAX不太熟悉，我遇到了一个问题

以下是模态内容：

<table>
        <tr>
        <td>
            {{ csrf_field() }}
            <select name="payer_id" class="js-basic-single payer_id" style="width:100%;" id="payer_id">
                 <option></option>
                 @foreach($customers as $customer)
                 <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                 @endforeach
            </select>
            <div id="existing_biller_details" class="hidden" name="existing_biller_details" style="margin-top:10px;">
                </div>
            <select class="form-control deposit_type" name="deposit_type" id="deposit_type">
            <option disabled selected>Please Select</option>
            <option value="Check">Check</option>
            <option value="Cash">Cash</option>
                <option value="ECheck">ECheck</option>
            </select>
            <div name="check_number" id="check_number" class="hidden">
                  <input type="text" placeholder="Check Number" class="form-control" id="check_number" name="check_number">
              </div>
            <input type="text" class="form-control" placeholder="Payment Amount" name="payment_amount" id="payment_amount">
            <input type="date" class="form-control" placeholder="Date of Deposit" name="date_deposit" id="date_deposit">
            <textarea placeholder="Notes" style="width:100%;" class="form-control" id="notes" name="notes"></textarea>
        </td><td style="width:50%;">
            <table style="width:100%;" id="freight_bill_items">
                <thead>

                    <td style="width:30%;font-weight:bold;text-align:center;">Bill No.</td><td style="width:30%; font-weight:bold; text-align:center;">Amount</td>

                </thead>
                <tbody>
                    <tr style="height:40px">
                <td style="width:30%;text-align:center;"><input type="text" name="payment_details[shipment_id][]" required class="form-control name_list" id="shipment_id" placeholder="Bill No." required></td><td style="width:30%;text-align:center;"><input type="text" name="payment_details[amount][]" required class="form-control name_list" id="amount" placeholder="Amount" required>
                        </td><td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                </tr>
            </tbody>
            </table>
                <div id="freight_bill_items_subtotal;" style="font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:left; background-color: #f0f8ff;">
                SUBTOTAL:
                    <input type="text" readonly name="freightBillSubtotal" id="freightBillSubtotal" class="form-control total_field" style="display:inline;" value="0.00">
                </div>




            </td>    
        </tr>
        </table>

{{csrf_field（）}}
@foreach（$customers作为$customer）
{{$customer->customer_name}
@endforeach
请选择
检查
现金
埃切克
工程量清单编号及金额
添加更多
小计：

正如您在下方看到的，有一个名为“运费\账单\项目”的div，它有一个表，在唯一的tbody行中有两个文本输入和一个按钮，用于添加另一个具有相同输入的表行

现在这里是我的ajax脚本：

<script type="text/javascript">
        $(document).on('click', '.createPayment', function() {
            $('.modal-title').text('Record New Payment');
            $('#payment').modal('show');
        });
        $('.modal-footer').on('click', '.add_payment', function() {
            //START
            var payment_details = [];
            //END
            $.ajax({
            type:'POST',
            url: '/payments/createNew',
            data: {
                payer_id: $('input[name=payer_id]').val(),
                notes: $('input[name=notes]').val(),
                payment_amount: $('input[name=payment_amount]').val(),
                date_deposit: $('input[name=date_deposit]').val(),
                check_number: $('input[name=check_number]').val(),
                deposit_type: $('input[name=deposit_type]').val(),
                payment_details:payment_details, //LOOKING FOR ASSISTANCE HERE//
                _token: $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#payment').modal('show');
                            toastr.error('Validation error - Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Successfully recorded Payment!', 'Success Alert', {timeOut: 5000});

                    }
                },
            });
        });
</script>

$（文档）.on（'单击'，'.createPayment'，函数（）{
$（'.modal title'）.text（'记录新付款'）；
美元（“#付款”）.modal（'show'）；
});
$（'.modal footer'）。在（'单击'，'上。添加付款'，函数（）{
//开始
var付款详情=[]；
//结束
$.ajax({
类型：'POST'，
url:“/payments/createNew”，
数据：{
付款人id:$（'input[name=payer\U id]'）。val（），
备注：$（'input[name=notes]'）。val（），
付款金额：$（“输入[名称=付款金额]）.val（），
存款日期：$（'input[name=存款日期]）.val（），
check_number:$（'input[name=check_number]'）。val（），
存款类型：$（'input[name=存款类型]）.val（），
付款详细信息：付款详细信息，//在此处寻求帮助//
_令牌：$（'input[name=_token]'）。val（），
},
成功：功能（数据）{
$（'.errorTitle'）.addClass（'hidden'）；
$（'.errorContent'）.addClass（'hidden'）；
如果（（数据错误））{
setTimeout（函数（）{
美元（“#付款”）.modal（'show'）；
错误（'Validation error-检查输入！'、'error Alert'、{timeOut:5000}）；
}, 500);
if（data.errors.title）{
$（'.errorTitle'）.removeClass（'hidden'）；
$（'.errorTitle'）.text（data.errors.title）；
}
if（data.errors.content）{
$（'.errorContent'）.removeClass（'hidden'）；
$（'.errorContent'）.text（data.errors.content）；
}
}否则{
toastr.success（'Successfully recorded Payment！'，'success Alert'，{timeOut:5000}）；
}
},
});
});

---

现在我一直想知道的是，如何将这些行及其输入内容传递到数组中，以便与其他值一起发布？

我建议您从重复的输入中删除id。改为指定一个类。装运id可以指定为属性