Getting the actual value from id in laravel

Hello everyone I have a problem in getting the actual values from id's. I am trying to explain my problem. I can't understand it because while storing these values i am getting them using ajax in a dropdown where it stores its values. But when i am trying to get these values back then it shows me those id's and not the actual values and really can't understand that how i can get the actual values from these id's. I also plucked them in my index method in the controller but that's not working because its ajax. Below is my code. Let me know if you wanna know anything more about this

//Controller actions for creating form

 public function create(){
        $classes = StudentsClass::pluck('class_name', 'id')->all();
        $rep_cat = ReportCtegories::pluck('name', 'id')->all();
        return view('admin.reports.create', compact('classes', 'rep_cat'));
    }

    public function getStudentId($id) {
        $students = DB::table("students")->where("students_class_id",$id)->pluck("student_id","id");
        return json_encode($students);
    }

    public function getStudentName($id) {
        $students = DB::table("students")->select("id", DB::raw("CONCAT(first_name, ' ', last_name) as name"))
            ->where("students_class_id",$id)->pluck("name","id");
        return json_encode($students);
    }

//Ajax for getting values

<script>

        $(document).ready(function () {

            //FOR LOADING STUDENTS
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('select[name="class_id"]').on('change', function () {
                var classID = $(this).val();
                if (classID) {

                    $.ajax({

                        url: '/reports/ajax/' + classID,
                        type: "GET",
                        dataType: "json",
                        success: function (data) {

                            var markup = '';
                            markup = '<thead><tr class="filters"><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Report Category<input type="text" class="form-control" disabled></th> <th style="width: 15%;" class="align-middle text-center">Actions</th> <tr></thead><tbody>';

                            $.each(data, function (key, value) {

                                markup += '<tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="' + value.id + '"></td> <td><input type="hidden" value="' + value.student_id + '" name="student_id[]">' + value.student_id + '</td> <td><input type="hidden" value="' + value.student_name + '" name="student_name[]">' + value.student_name + '<td><input type="hidden" value="' + value.report_categories_id + '" name="report_categories_id[]">' + value.report_categories_id + '</td>' +  '<td style=" width=12%" class="text-center"> <a data-toggle="modal" data-target="#editAttendanceModal' + value.id + '"""><button title="Edit" class="btn btn-outline-primary"><span class="fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';

                            });
                            markup += '</tbody>';
                            $('table[id="studentsData"]').html(markup);
                        }
                    });
                }

            });
        });

    </script>