View problem

Hello everyone . Here is my code. Here i can get data into the but my problem is when i select class in my table then it just ruined my page layout and it become so weird...Indeed i am getting data but just can't maintain my page layout. Pls take a review

//My controller public function index(Request $request) { $class_id = $request->class_id; $students = DB::table('students')->join('students_classes', 'students_classes.id', 'students.students_class_id') ->where('students.students_class_id', $class_id)->get(); return view('admin.students.attendance.index', compact('students')); }

//Routes

Route::resource('/students/attendance', 'AttendanceController', ['names'=>[

'index'=>'admin.students.attendance.index',

]]);

//My view and ajax

<div class="ml-4 mr-4 py-2">
    <h3 class="text-center display-4">Take Attendance</h3>

    <select name="classes" id="classes">
    @foreach(App\StudentsClass::all() as $class)

            <option id="class{{$class->id}}" value="{{$class->id}}">{{$class->class_name}}</option>

    @endforeach
    </select>

    <table id="studentsData" class="table table-striped table-bordered table-list-search">
        <thead>
            <tr>
                <th>#</th>
                <th>Student ID</th>
                <th>Student Name</th>
                <th>Attendance</th>
            </tr>
        </thead>
            @foreach($students as $student)
        <tbody>
            <tr>
                <th>{{$student->id}}</th>
                <td>{{$student->student_id}}</td>
                <td>{{$student->first_name}} {{$student->last_name}}</td>
                <td>
                    <div class="form-group">
                        <select class="form-control" id="gender">
                            <option>Present</option>
                            <option>Absent</option>
                            <option>Leave</option>
                        </select>
                    </div>
                </td>
            </tr>
        </tbody>
            @endforeach
    </table>
    <a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
</div>

@stop

@section('script')

<script>

    $(document).ready(function () {
        @foreach(App\StudentsClass::all() as $class)
        $("#class{{$class->id}}").click(function () {
            var classes = $("#class{{$class->id}}").val();
            $.ajax({

                                url: '{{url('/students/attendance')}}',

                                type: "GET",

                                dataType: "html",
                data: 'class_id=' + classes,

                success:function(response) {

                                    // console.log(response);
                    $('#studentsData').html(response);

                }

                 });
        });
        @endforeach
    });