How to display ajax result in table when dropdown is changed

Hello,

I'd like to ask help please : in my blade I have a dropdown menu of club list; what I'd like to have is, when a club is selected from this dropdown, I'll have the club's members shown in the table below, where I can check or not (club member attendance). The ajax script is working, but I don't know how to display the ajax result in the table. (I hope my explanation is not too confusing)..

<form method="POST" action="{{ route("admin.club-attendances.store") }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="club_id">{{ trans('Club') }}</label>
                        <select class="form-control select2 " name="club_id" id="club_id">
                            @foreach($clubs as $id => $entry)
                                <option value="{{ $id }}" {{ old('club_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="attendance_date">{{ trans('Attendance Date') }}</label>
                        <input class="form-control date" type="text" name="attendance_date" id="attendance_date" value="{{ old('attendance_date') }}">
                    </div>
                </div>
            </div>
<div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered dataTable">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Student</th>
                            <th>Present</th>

                        </tr>
                        </thead>
                        <tbody>
                            @foreach(..... as $member)
                                <tr>
                                    <td class="sorting_1">{{$loop->iteration}}</td>
                                    <td>{{ $member->full_name ?? ''}}</td>
                                    <td>
                                        <input type="hidden" name="present" value="0">
                                        <input class="form-check-input" type="checkbox" name="present" id="present" value="1" {{ old('present', 0) == 1 || old('present') === null ? 'checked' : '' }}>    
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('Save') }}
                </button>
            </div>
</form>

<script>
    $(document).ready(function(){
        $('#club_id').on('change', function(){
            var clubID = $(this).val();
            console.log(clubID);

            $.ajax({
                type: "GET",
                url: "/getClubMembers/" + clubID,
                dataType: 'json',
                success: function(data){
                    console.log(data);
                }
            });
        });
    });
</script>

In my route web.php :

Route::get('/getClubMembers/{id}',function($id){    // $id is the Club ID
    $members = Student::whereHas('studentClubRegistrations', function ($q) use($id) {
        $q->where('status_id',102)->whereHas('clubs', function($qq) use($id){
            $qq->where('club_activity_id', $id);
        });
    })->get()->pluck('full_name', 'id');
    return response()->json($members);
});