Laravel 5.2 3 level cascading dropdown list

I am trying to do a 3 levels dynamic or dependent dropdown list. i managed to fix the first two and they work just fine but the third one still not working .

my Route:

Route::get('api/branch-dropdown', 'ApiController@branchDropDownData');
Route::get('api/asset-dropdown', 'ApiController@assetDropDownData');

Controller to retrieve data:

  class ApiController extends Controller
    {
        public function branchDropDownData()
        {
            $bran_id = Input::get('bran_id');
            $department = Department::where('branch_id', '=' , $bran_id)->get();
            return Response::json($department);
        }
        
        public function assetDropDownData()
        {
            $dep_id = Input::get('dep_id');
    
            $asset = Asset::where('department_id', '=' , $dep_id)->get();
    
            return Response::json($asset);
        }
    }

And the view(create form):

      <div class="form-group">
                    {!! Form::label('branch_id', 'Branch Name:')!!}
                    {!! Form::select('branch_id', ['' => 'Choose Options']+ $branches, null, ['class'=>'form-control select2', 'name'=>'branch', 'id'=>'branch'])!!}
                </div>

                <div class="form-group">
                    {!! Form::label('department_id', 'Department Name:')!!}
                    {!! Form::select('department_id', ['' => 'Choose Options']+ $departments, null, ['class'=>'form-control select2' , 'name'=>'department',   'id'=>'department'])!!}
                </div>

                <div class="form-group">
                    {!! Form::label('asset_id', 'Asset Name :')!!}
                    {!! Form::select('asset_id', ['' => 'Choose Options']+ $assets, null, ['class'=>'form-control select2', 'name'=>'asset', 'id'=>'asset'])!!}
                </div>

my script

      $('#branch').on('change',function (e) {
           console.log(e);

             var bran_id = e.target.value;

                //ajax
                $.get('/api/branch-dropdown?bran_id=' + bran_id, function (data) {

                     //success data

                  $('#department').empty();
                 $.each(data , function (index, departmentObj) {
                 $('#department').append('<option value="'+departmentObj.id+'">'+departmentObj.name+'</option>');
                   $('#department').on('change',function (e) {
                       console.log(e);
                         var dep_id = e.target.value;
                          //ajax
                         $.get('/api/asset-dropdown?dep_id=' + dep_id, function (data) {

                          //success data

                           $('#asset').empty();
                           $.each(data , function (index, assetObj) {
                            $('#asset').append('<option value="'+assetObj.id+'">'+assetObj.name+'</option>');
                        });
                     });
                   });
                });
              });
              });
            </script>