while doing Edit products , getting list of all subcategory with category

i want to get only list of subcategories under the selected category while editing the product categories

here is my controller for edit

 public function edit(Products $product)
    {
        return view('admin.products.add')->with('product',$product)->with('categories',Category::all())->with('brands',Brand::all())->with('subcategories',SubCategory::all());
        //
    }

here is my blade file

 <div class="col-lg-4">
                      <div class="form-group mg-b-10-force">
                        <label class="form-control-label">Category: <span class="tx-danger">*</span></label>
                        <select class="form-control select2" required name="category_id" data-placeholder="Choose Category">
                            <option label="Choose Category">Choose Category</option>
                            @foreach ($categories as $category)
                            <option value="{{ $category->id }}" @if (isset($product))
                                @if($category->id==$product->category_id) selected  @endif
                            @endif   >{{$category->name  }}</option>
                            @endforeach

                        </select>
                      </div>
                    </div><!-- col-4 -->


                    <div class="col-lg-4">
                        <div class="form-group mg-b-10-force">
                          <label class="form-control-label">Sub Category: <span class="tx-danger">*</span></label>
                          <select class="form-control select2" required name="subcategory_id" data-placeholder="Choose Sub Category">

                              @if (isset($product))
                                 @foreach ($subcategories. as $subcategory)
                                 <option value="{{ $subcategory->id }}" @if($subcategory->id==$product->subcategory_id) selected  @endif >{{ $subcategory->name }}</option>
                                 @endforeach
                              @endif

                          </select>
                        </div>
                    </div><!-- col-4 -->

<script type="text/javascript">
    $(document).ready(function(){
   $('select[name="category_id"]').on('change',function(){
        var category_id = $(this).val();
        if (category_id) {

          $.ajax({
            url: "{{ url('/get/subcategory/') }}/"+category_id,
            type:"GET",
            dataType:"json",
            success:function(data) {
            var d =$('select[name="subcategory_id"]').empty();
            $.each(data, function(key, value){

            $('select[name="subcategory_id"]').append('<option value="'+ value.id +'">' + value.name + '</option>');

            });
            },
          });

        }else{
          alert('danger');
        }

          });
    });

</script>

while editing the any product, while clicking in the subcategory list it shows list of all subcategories under the selected category

for example i have 20 subcategory under 1st category there is 4 subcategory but while editing list of all categories is showing under previous selected catetegory