Dependent Dropdown ajax display data with the where clauses

Using the Dependent dropdown in ajax how can I only display data in a dropdown with the column names like for example when I select a program I want to display the first period only data with its column has name with 1st Period same as the 2nd period and 3rd Period only display their own specific data with the column names

Example: where i used this line of code $firstPeriod = DB::table('subjects')->where('period', '1st Period')->get(); I get to display the data with the "1st Period" with the $firstPeriod variable now how can I merge both the ajax function $subjects['data'] = Subject::orderby("code","asc") ->select('id','code','subject') ->where('program',$programid) ->get(); and $firstPeriod = DB::table('subjects')->where('period', '1st Period')->get();

register.php

<h5 class="mt-5 lead">Programs & Subjects</h5>
<div class="col mt-4 mb-3">
    <div class="col">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">Select Your Program</label>
            <select class="form-select" aria-label="Default select example" id="sel_program" name="program">
                <option disabled selected>-- Select Program --</option>
                @foreach ($programData['data'] as $program)
                    <option value="{{$program->id}}">{{$program->program}} - {{$program->description}}</option>
                @endforeach
            </select>
            <span class="text-danger">@error('program'){{$message}} @enderror</span>
        </div>
    </div>
</div>

<div class="row mt-4 mb-3">
    <div class="col-md-6 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example1">1ST PERIOD</label>
            <select id='first_period' name='first_period' class="form-select">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('first_period'){{$message}} @enderror</span>
        </div>
    </div>
    <div class="col-sm-6 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">2ND PERIOD</label>
            <select class="form-select" aria-label="Default select example" id="second_period" name="second_period">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('second_period'){{$message}} @enderror</span>
        </div>
    </div>
    <div class="col mt-3 mt-2">
        <div class="form-outline form-line">
            <label class="form-label" for="form6Example2">3RD PERIOD</label>
            <select class="form-select" aria-label="Default select example" id="third_period" name="third_period">
                <option disabled selected>-- Select Subject --</option>
            </select>
            <span class="text-danger">@error('third_period'){{$message}} @enderror</span>
        </div>
    </div>
</div>

<script type='text/javascript'>
        $(document).ready(function(){
        
            $('#sel_program').change(function(){
                // Department id
                var id = $(this).val();
        
                // Empty the dropdown
                $('#first_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#first_period").append(option); 
                        }
                    }
                }
                });

                $('#second_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#second_period").append(option); 
                        }
                    }
                }
                });

                $('#third_period').find('option').not(':first').remove();
        
                // AJAX request 
                $.ajax({
                url: '/student/auth/register-new-student/getSubjects/'+id,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
        
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){
                            var id = response['data'][i].id;
                            var code = response['data'][i].code;
                            var subject = response['data'][i].subject;
                            var option = "<option value='"+ id +"'>"+ code + "\n" + subject +"</option>"; 
                            $("#third_period").append(option); 
                        }
                    }
                }
                });
            });
        });
    </script>

MainController

function register()
    {
        $firstPeriod = DB::table('subjects')->where('period', '1st Period')->get();
        $secondPeriod = DB::table('subjects')->where('period', '2nd Period')->get();
        $thirdPeriod = DB::table('subjects')->where('period', '3rd Period')->get();
        $subjects = Subject::all();

        $programData['data'] = Program::orderby("program","asc")
        ->select('id','program','description')
        ->get();

        return view('auth.register-student', ['firstPeriod'=>$firstPeriod,'secondPeriod'=>$secondPeriod,'thirdPeriod'=>$thirdPeriod,'programData'=>$programData,'subjects'=>$subjects]);
    }

function getSubjects($programid=0)
    {
        $subjects['data'] = Subject::orderby("code","asc")
        ->select('id','code','subject')
        ->where('program',$programid)
        ->get();
        return response()->json($subjects);
    }