How to display Grades in a dropdown and related subjects in checkboxes?

Hi all... I have eager loaded all the grades with the subjects from the database. I want to display it in a cascading select box with checkboxes below...

I want it when a user selects a Grade from the dropdown menu, a group of subjects related to that Grade should be displayed below dynamically...

My Controller Method

public function create()
    {        
        $grades = Grade::with('subjects')->orderBy('slug', 'asc')->get();
        return view('admin.users.create', compact( 'grades'));
    }

create.blade.php

<select id="grade" name="grade" class="form-control @error('grade') is-invalid @enderror" value="{{ old('grade') }}">
                <option value="">Choose a Grade...</option>
                @foreach($grades as $grade)
                    <option value="{{ $grade->name }}" {{ old('grade', $grade) == $grade->name ? 'selected' : "" }}>{{ 								$grade->name }}</option>                                            
                @endforeach                
            </select>

@foreach($grade->subjects as $subject)
    <div class="custom-control custom-checkbox mt-2">
        <input type="checkbox" class="custom-control-input @error('subjects') is-invalid @enderror" id="{{$subject->slug}}" name="subjects[]" value="{{$subject->name}}" 
        {{ (is_array(old('subjects')) && in_array( $subject->name, old('subjects', $subjects))) ? 'checked' : '' }} />
        <label class="custom-control-label" for="{{$subject->slug}}">{{$subject->name}}</label>
    </div>
    @endforeach