[SOLVED] Laravel Drop dowm menu filter

Using PHP Laravel and JavaScript, I am creating a dropdown menu as a filter or search feature. The results will be displayed below the dropdown menu. The filter for location is working, but the other two dropdowns, which are for type and project name, are not functioning. Can you please assist me with this issue? Thank you.

I have attempted to modify the JavaScript and model to see if there are any improvements.

this is the .blade.php

@extends('pages.main-content')
@section('css')
<style>
    .main-f {
        height: 85vh;
    }

    .bg-sidebar {
        background-color: #313A46;
    }
</style>
@endsection

@section('content')
<div class="container-fluid shadow py-3 px-5 main-f for_label">
    <div class="row p-1">
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Location</label>
            <select name="irlocation" id="irlocation" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($location as $loc)
                <option value='{{ $loc->loc_name }}'>{{ $loc->loc_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Type</label>
            <select name="irtype" id="irtype" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($incidenttype as $incident)
                <option value='{{ $incident->incidenttype }}'>{{ $incident->type_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Project Name</label>
            <select name="irtype" id="irtype" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($systemapps as $system)
                <option value='{{ $system->systemapps }}'>{{ $system->syst_xname }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row p-2">
        <div class="col-12 col-md-4 col-lg-4">
            <button type="submit" id="submitBtn" class="btn btn-allcard">SUBMIT</button>
        </div>
    </div>
    <table id="dataTable" class="table" style="display: none;">
        <thead>
            <tr>
                <th>IR Number/ID</th>
                <th>Location</th>
                <th>Type</th>
                <th>Project Name</th>
            </tr>
        </thead>
        <tbody id = "tableData">
            @forelse($incidentReports as $incident)
            <tr>
                <td>{{ $incident->incident_id }}</td>
                <td>{{ $incident->incident_type }}</td>
                <td>{{ $incident->incident_type }}</td>
                <td>{{ $incident->incident_affected }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="4">No data available</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
  $('#header-toggle').click();

  $('#irlocation, #irtype').on('change', function() {
    var location = $('#irlocation').val();
    var type = $('#irtype').val();

    $.ajax({
      url: "{{ route('ir.reports') }}",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        location: location,
        type: type
      },
      success: function(response) {
        var tableBody = $('#dataTable tbody');
        tableBody.empty(); // Clear previous table rows

        if (response.length > 0) {
          var rows = $.map(response, function(incident) {
            return `<tr>
              <td>${incident.incident_id}</td>
              <td>${incident.incident_location}</td>
              <td>${incident.incident_type}</td>
              <td>${incident.incident_affected}</td>
            </tr>`;
          });

          tableBody.html(rows.join(''));
        } else {
          var emptyRow = `<tr>
            <td colspan="4">No data available</td>
          </tr>`;
          tableBody.html(emptyRow);
        }

        $('#dataTable').show();
      }
    });
  });

  $('#submitBtn').click(function(e) {
    e.preventDefault();
    $('#irlocation, #irtype').trigger('change');
  });
});

</script>
@endsection

this is the web controller

public function index(Request $request)
    {
        session(['message' => 'Incident Management Report', 'icon' => 'bi bi-exclamation-triangle-fill', 'icon-code' => '']);
    
        $incidenttype = SystemIncidentType::orderBy('type_name', 'asc')->get();
        $systemapps = SystemApps::orderBy('syst_xname', 'asc')->get();
        $location = ModLocation::orderBy('loc_name', 'asc')->get();
    
        $incidentReports = IncidentReports::with('userbasic', 'useremp')->get();
    
        return view('pages.incident_management_report.reports', compact('incidenttype', 'systemapps', 'location', 'incidentReports'));
    }

this is the api controller

public function irReports(Request $request)
{
    if ($request->ajax()) {
        $location = $request->input('location');
        $type = $request->input('type');
        $project = $request->input('project');

        $query = IncidentReports::query();

        if ($location) {
            $query->where('incident_location', $location);
        }

        if ($type) {
            $query->where('incident_type', $type);
        }

        if ($project) {
            $query->where('incident_affected', $project);
        }

        $data = $query->get();

        return response()->json($data);
    }
}

this the api routes

Route::post('ir/reports', [IncidentReportsController::class, 'irReports'])->name('ir.reports');