循环内的x可编辑字段会添加多个字段（具有相同的名称）

Question

我在foreach循环中有以下代码 data-pk设置为company_payment id主键。我每行只能得到x可编辑的字段，如何为该函数添加多字段（具有相同的名称）？

<a href="#" id="edit_payment_method"  class="btn btn blue" data-type="select" data-pk="{{$company_payment->id}}" data-url="/manage/company_payments/update" data-title="Select Payment_method"> <i class="fa fa-cog"></i> {{ $company_payment->payment_method }}</a>


<script>


$(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            }
        });
        //toggle `popup` / `inline` mode
        $.fn.editable.defaults.mode = 'inline';
        $.fn.editable.defaults.ajaxOptions = {type: "PUT"};
        $.fn.editable.defaults.params = function (params) {
            params._token = $("meta[name=token]").attr("content");
            return params;
        };
        //make username editable
        $('[data-name="total_payment"]').editable({
            title: 'Enter total_payment'
        });
        $('[data-name="payment_method"]').editable({
            title: 'Enter payment_method'
        });
        $('[data-name="invoice_number"]').editable({
            title: 'Enter invoice_number'
        });

        $(function(){
            $('#edit_payment_method').editable({
                value: 0,
                source: [
                    {value: 'wire', text: 'Wire'},
                    {value: 'credit_card', text: 'Credit Card'},
                    {value: 'cash', text: 'Cash'},
                    {value: 'bitcoin', text: 'Bitcoin'}
                ]
            });
        });

    });
</script>