подкатегория не отображается через категорию в другом DIV с javascript и ajax

Question

в первой строке, когда я нажимаю категорию, затем автоматически создается подкатегория, что является правильным, но когда я выбираю категорию во второй строке, это не выполняется. Когда я изменяю категорию в первой строке, тогда подкатегория показывает только первую строку, но вставлена ​​из это происходит во всех подкатегориях строк. Как я могу решить эту проблему ?????

javascript для создания нового тега div

 <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}}";
        var add;
        @foreach($category as $key)
            add  += '<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'
        @endforeach



            $(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>'+
                                    add +
                              '</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>

javascript для подкатегории через категорию ..

<script type="text/javascript">

   $(document).ready(function() 
   {             
        $('select#category').on('change', function() 
        {                    
            var catID = $(this).val();
            if(catID) 
            {
                $.ajax({ // next step we need to make this url dynamic 
                    url: "{{url('/')}}" + '/Supplier/add_supplier/ajax/' + catID,
                    type: "GET",
                    dataType: "json",
                    success: function(data)
                    {
                         console.log(data);
                         $('select#subcategory').empty();

                         $.each(data, function(key, value)
                         {
                                var select = "---select---"
                               var option = new Option(value, key);
                               $(option).html(value);
                               $('select#subcategory').append(option);
                         });
                    }
                });
            }
            else{
                $('select#subcategory').empty();
            }
        });
    });
</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="price_id">  
                                                       <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>