How to catch multiple object from ajax controller to view in PHP-laravel

I have a situation where a student may have multiple course. So when I select a student multiple course related to that student should load from database with the help of ajax. But in my ajax view it's only loaded second data and with the change of selection of other student nothing change in the view page. Previous data's only shown. But I have checked in console. it's showing correctly. How do I solve this problem? Anyone can help me to find the solution?

Here is my route:

Route::post('ajax-result',[
        'uses'=>'ResultController@ajax_result',
        'as'=>'ajax-student'
    ]);

Here is the controller:

 public function ajax_result(Request $request)
    {
            $std_id= $request->input(['std_id']);
         $student = DB::table('results')->join('grades','results.grade_id', '=','grades.id')
           ->join('courses', 'results.course_id', '=', 'courses.id')
           ->join('students', 'results.student_id', '=', 'students.id')
           ->join('departments','students.department_id','=','departments.id')
           ->where('students.id', $std_id)                      
           ->selectRaw('students.name,students.email,departments.name as d_name,
             courses.name as c_name,courses.code as c_code,grades.grade')
           ->get();

            return \Response::json($student); 
    }

And Here is the view with ajax:

    <div class="container" >
        <h3> View Result </h3>
    <div class="form-group">
        <label for="">Student Reg No.</label>
        <select class="form-control input-sm" required id="student" name="student_id" >
        <option>Select a Student</option>
        @foreach($student as $row)
        <option value="{{$row->id}}">{{$row->registraion_number}}</option>
        @endforeach
        </select>
    </div>   

   <div class="form-group">
    <label>Name</label>
     <input type="text" name="name" id="name" class="form-control"  >
    </div>

    <div class="form-group">
      <label>Email</label>
      <input type="text" name="email" id="email" class="form-control"  >
    </div>

    <div class="form-group">
      <label>Department</label>
      <input type="text" name="department" id="department" class="form-control"  >
    </div>

    <table  class="table table-striped table-bordered"  id="example">
    <thead>
      <tr>
        <td>Serial No</td>
        <td>Course Code</td>
        <td>Name</td>
        <td>Grade</td>                      
      </tr>
    </thead>
<tbody>
      <?php $i=1; ?>

      <tr>
        <td>{{$i}}</td>
        <td id="code_{{$i}}"></td>
        <td id="name_{{$i}}"></td>
        <td id="grade_{{$i}}"></td>           
      </tr>
      <?php $i++; ?>                  

    </tbody>
  </table>          
    </div>
<script type="text/javascript">
     $('#student').on('change',function(e){       
     $('#course').find('option').remove().end();

       var std_id = $('#student option:selected').attr('value');

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

               $.ajax({ 
                type: "POST", 
                url : "{{url('ajax-student-result')}}",
                 data:{std_id:std_id},
                success : function(data) {                  
              $.each(data,function(index,subcatObj){
                $('#name').val(subcatObj.name); 
                $('#email').val(subcatObj.email); 
                $('#department').val(subcatObj.d_name); 
              $('#code_'+index).html(subcatObj.c_code);
              $('#name_'+index).html(subcatObj.c_name);
              $('#grade_'+index).html(subcatObj.grade);                                      
                });
               } 

              });

   });
</script>