создание нового div через javascript

Question

В форме есть один тег div, в котором есть некоторые поля, теперь я могу создать больше полей из этого одного тега div, из символа плюс с помощью javascript, и я также могу удалить поля div через символ минус ... в основном или первом теге DIV отображаются все категории, но когда я создаю еще один символ DIV через символ плюс, чтобы не отображались все категории ..., пожалуйста, кто-нибудь подскажет мне, как я могу решить эту проблему ...

js код

<script src="{{ asset('js/jquery.min.js') }}"></script>
    <script type="text/javascript">
       $(document).ready(function(){
        var addButton = $('#addButton');
        var wrapper = $('#wrapper');
        var x = "{{$detail_count + 1}}";
            $(addButton).click(function(){
                x++;
                $(wrapper).append(
                    '<div class="form-group row">'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>'+
                            '<div class="col-sm-2">'+
                                 '<select class="form-control" name="cat_id" id="category '+x+'">'+
                                    '<option value="" disabled selected>Select Category</option>'+
                                     'foreach($category as $key){'+
                                        '<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'+
                                   ' }' +

                              '</select>'+
                            '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>'+
                        '<div class="col-sm-2">'+
                            '<select class="form-control" id="subcategory '+x+'" name="sub_cat_id">'+
                                '<option value="" disabled selected>Subcategory from category</option>'+
                            '</select>'+
                        '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>'+
                            '<div class="col-sm-2">'+
                               '<select class="form-control" id="productprice '+x+'" name="pro_price">  '+
                               '<option>Price from subcategory</option>'+
                               '</select>'+
                            '</div>'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>'+
                        '<div class="col-sm-1">'+
                            '<input type="text" class="form-control" name="total[]" cat_id="total '+x+'">'+
                        '</div>'+
                        '<div class="col-sm-1">'+
                            '<a href="javascript:void(0)" id="remove" class="btn btn-danger btn-fill" title="Delete"><i class="fa fa-minus"></i></a>'+
                        '</div>'+
                    '</div>'
                );
            });

            $(wrapper).on('click','#remove',function(){
                if(confirm("Do you want to delete this row?")){
                    $(this).parent().parent().remove();
                }
            });
       });
    </script>

HTML код

 <div class="col-md-12 field-wrapper" id="wrapper">
                                              <div class="form-group row">
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>
                                                    <div class="col-sm-2">
                                                         <select class="form-control" name="cat_id" id="category">
                                                            <option value="" disabled selected>Select Category</option>
                                                             @foreach($category as $key)
                                                                <option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
                                                            @endforeach
                                                      </select>
                                                    </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>
                                                <div class="col-sm-2">
                                                    <select class="form-control" id="subcategory" name="sub_cat_id">
                                                        <option value="" disabled selected>Subcategory from category</option>
                                                    </select>
                                                </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>
                                                    <div class="col-sm-2">
                                                       <select class="form-control" id="productprice" name="pro_price">  
                                                       <option>Price from subcategory</option>                                                  
                                                       </select>
                                                    </div>
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>
                                                <div class="col-sm-1">
                                                    <input type="text" class="form-control" name="total[]">
                                                </div>
                                                <div class="col-sm-1">
                                                    <a href="javascript:void(0)" id="addButton" class="btn btn-primary btn-fill" title="Add Row"><i class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>

Первый DIV

Другой DIVs

Answer 1

Это происходит потому, что ваш foreach l oop находится внутри вашего append(), и он не добавляет опцию all, добавляется только последнее значение, которое вы можете видеть в своих выходных данных. Теперь, чтобы решить эту проблему, поместите этот foreach l oop вне вашего приложения, что-то вроде этого (я не знаю много о laravel, поэтому может быть синтаксическая ошибка):

var select=""
foreach($category as $key){ 
//appending option in select variable
select+='<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'; 
}

Затем передал это значение, то есть: select в добавлении чего-либо как ниже:

$(wrapper).append(
    '<div class="form-group row">' +
    '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>' +
    '<div class="col-sm-2">' +
    '<select class="form-control" name="cat_id" id="category ' + x + '">' +
    '<option value="" disabled selected>Select Category</option>' +
    select + //<--pass here 
'</select>' + '</div>');