Dependent dropdown in laravel 8

Solution for Dependent dropdown in laravel 8
is Given Below:

I need a dependent dropdown list with 4 levels. First I tried with two levels, but not working. I tried some coding but all are making trouble to list the second dropdown. Anyone can help me? Any issue in jQuery? Herewith annexed my code,

Controller

Controller name – SubjectController

public function getDepartments($id) 
    {        
        $departments = DB::table("departments")->where("faculty_id",$id)
->pluck("department_name","id");
        return json_encode($departments);
    }

public function getFaculties()
        {
            $faculties = DB::table('faculties')->pluck("faculty_name","id");
            return view('pages/subject/view-subject',compact('faculties'));
        }

view

 <div class="col-md-4">
                              <label for="faculty">Select Faculty</label>
                                <select class="form-control m-b"  name="faculty">
                                    <option value="">  Faculty </option>
                                    @foreach ($faculties as $key => $value)
                                    <option value="{{ $key }}"> {{ $value }} </option>
                                    @endforeach
                                  </select>
                              </div>
                                                                            
                            <div class="col-md-4">
                              <label for="department">Select Department:</label>
                                <select class="form-control m-b" name="department">
                                    <option>Department</option>                                   
                                </select>
                            </div>  

<script type="text/javascript">
  jQuery(document).ready(function ()
  {
          jQuery('select[name="faculty"]').on('change',function(){
             var facultyID = jQuery(this).val();
             if(facultyID)
             {
                jQuery.ajax({
                   url : 'pages/subject/view-subject/getDepartments' +facultyID,
                   type : "GET",
                   dataType : "json",
                   success:function(data)
                   {
                      console.log(data);                     
                      jQuery('select[name="department"]').empty();
                      jQuery.each(data, function(key,value){
                         $('select[name="department"]').append('<option value="'+ key +'">'+ value +'</option>');
                      });
                   }
                });
             }
             else
             {
                $('select[name="department"]').empty();
             }
          });
  });
  </script>

DB
Two tables used for filtering

public function up()
    {
        Schema::create('faculties', function (Blueprint $table) {
            $table->id();
            $table->string('faculty_name'); 
            $table->timestamps();
        });
    }

 public function up()
    {
        Schema::create('departments', function (Blueprint $table) {
            $table->id();
            $table->string('department_name');
            $table->unsignedBigInteger('faculty_id');
            $table->foreign('faculty_id')->references('id')->on('faculties'); 
            $table->timestamps();
        });
    }

web

Route::get('pages/subject/view-subject','[email protected]')->name('pages/subject/view-subject');

Route::get('pages/subject/view-subject/getDepartments{id}','[email protected]')->name('getDepartments');