Laravel multiple rows of dynamic dropdowns

Question

So in my laravel view, I have a row of three dropdown menus, category, supplier and products that dynamic populate based on what the user selects.

<fieldset>
    <legend>Products</legend>

    <div id="invoice-line-item" class="row row-eq-height">
        <div class="col-md-2">
            <div class="form-group">

                {{ Form::label('category', "Category", array('class' => 'col-xs-3 control-label')) }}

                <select name="category" id="category" class="form-control" >
                    <option value="none">Select a category</option>
                        @foreach($categories as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                </select>
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                {{ Form::label('supplier', "Supplier", array('class' => 'col-xs-3 control-label')) }}
                <select name="supplier" id="supplier" class="form-control"></select>
            </div>
        </div>

        <div class="col-md-2">
            <div class="form-group">
                {{ Form::label('product', "Product", array('class' => 'col-xs-3 control-label')) }}
                <select name="product" id="product" class="form-control"></select>
            </div>
        </div>  

        <div class="col-md-2">
            <div class="form-group">
                {{ Form::label('quantity', 'Quantity', array('class' => 'col-xs-3 control-label')) }}
                {{ Form::number('quantity', '', array('class' => 'form-control')) }}
            </div>
        </div>

        <div class="col-md-2" style="align-self:center;">
            <button type="button" class="btn btn-xs btn-danger remove-invoice-item">Remove</button>
        </div>

    </div>

    <div class="row">
        <div class = "col-md-12">
            <div class="form-group">
                <a href="#" id="add-invoice-item" class="btn btn-sm btn-info">Add Item</a>
            </div>
        </div>
    </div>

</fieldset>

The jQuery handling dynamic population:

<script>
    $('#category').change(function() {
            $.get("{{ url('loadSuppliers') }}", { selectedCategory: $("#category").val() }, function(data) {
                $("#supplier").empty();
                $("#product").empty();

                if (data) {
                    $("#supplier").append("<option value='none'>Select a supplier</option>");

                    $.each(data, function(key, value) {
                        $("#supplier").append("<option value = '" + key + "'>" + value + "</option>");
                    });
                }
            });
        });

        $("#supplier").change(function() {
            $.get("{{ url('loadProducts') }}", { selectedSupplier: $("#supplier").val() }, function(data) {
                $("#product").empty();

                if (data) {
                    $("#product").append("<option value='none'>Select a product</option>");

                    $.each(data, function(key, value) {
                        $("#product").append("<option value = '" + key + "'>" + value + "</option>");
                    });
                }
            });
        });
</script>

jQuery that appends rows:

var invoice_line_item_template = 
            '<div id="invoice-line-item" class="row row-eq-height">' +
                '<div class="col-md-2">' +
                    '<div class="form-group">' +

                        '{{ Form::label('category', "Category", array('class' => 'col-xs-3 control-label')) }}' +

                        '<select name="category" id="category" class="form-control" >' +
                            '<option value="none">Select a category</option>' +
                            '@foreach($categories as $id => $name)' +
                                '<option value="{{ $id }}">{{ $name }}</option>' +
                            '@endforeach' +
                        '</select>' +
                    '</div>' +
                '</div>' +

                '<div class="col-md-2">' +
                    '<div class="form-group">' +
                        '{{ Form::label('supplier', "Supplier", array('class' => 'col-xs-3 control-label')) }}' +
                        '<select name="supplier" id="supplier" class="form-control"></select>' +
                    '</div>' +
                '</div>' +

                '<div class="col-md-2">' +
                    '<div class="form-group">' +
                        '{{ Form::label('product', "Product", array('class' => 'col-xs-3 control-label')) }}' +
                        '<select name="product" id="product" class="form-control"></select>' +
                    '</div>' +
                '</div>' +

                '<div class="col-md-2">' +
                    '<div class="form-group">' +
                        '{{ Form::label('quantity', 'Quantity', array('class' => 'col-xs-3 control-label')) }}' +
                        '{{ Form::number('quantity', '', array('class' => 'form-control')) }}' +
                    '</div>' +
                '</div>' +

                '<div class="col-md-2" style="align-self:center;">' +
                    '<button type="button" class="btn btn-xs btn-danger remove-invoice-item">Remove</button>' +
                '</div>' +                              
            '</div>';           


        $('#add-invoice-item').on('click', function(e) {
            e.preventDefault();

            $(this).before(invoice_line_item_template);
        });

        $(document).on('click', '.remove-invoice-item', function(e){
            e.preventDefault();

            $(this).parents('#invoice-line-item').remove();
        });

The dynamic population for the first row of 3 dropdown menus dynamically populates through jQuery as excepted.

However, I also have the functionality that when the user clicks the add item button, another row of 3 dropdown menus are appended. In other words, another invoice-line-item. However, because they all use the same ids, #category, #supplier and #product, the following rows after the first do not dynamically populate as expected. I also don't know how I would be handling these multiple dropdowns with the same ids in the controller when I submit the form and save to the database. How should I be approaching this problem?

Answer 1

事实证明，我需要有一个计数器为每个元素创建唯一的ID，然后将单独的侦听器附加到每个元素，以便它们都可以单独操作。