Using Sluggable with selected/option input

Hello guys, i just try to make a slug from another table, but ya it doesnt work, how can i fix this

its my views

Name @foreach ($student as $st) student_id === $st->id || old('name')===$st->id) selected @endif>{{ $st->name }} @endforeach

    <div class="mb-3">
        <label for="slug" class="form-label">Slug</label>
        <input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" required
            readonly value="{{ old('slug') }}">
        @error('slug')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
        @enderror
    </div>

const name = document.querySelector('#name'); const slug = document.querySelector('#slug');

name.addEventListener('change', function(){
    fetch('/dashboard/class/checkSlug?name=' + name.value)
    .then(response => response.json())
    .then(data => slug.value = data.slug)
});

its My Model: public function sluggable(): array { return [ 'slug' => [ 'source' => 'name' ] ]; }

and my controller: public function checkSlug(Request $request) { $slug = SlugService::createSlug(class::class, 'slug', $request->class->student->name); return response()->json(['slug' => $slug]); }