laravel: fetch data throws 404 response

I’m trying to make dependent dropdown, lets say I have contractor dropdown, on clicking any option it should load respective subcontractor in subcontractor dropdown.
On making ajax request I get 404 response.

this is the route:

Route::post('/get_subContractors/{id}',    [WorkmenDetailsController::class, 'getsubContractors']);

Controller:

public function getsubContractors($contractor_id = null){
        $subContractors = SubContractor::where('$contractor_id', $contractor_id)->get();

        return response()->json([
            'status' => 1,
            'subContractors' => $subContractors
        ]);
    }

dropdown fileds in bootstrap modal:

<div class="form-group col-md-6">
                                <label for="contractor" class="">Contractor</label>
                                <select name="contractor_id" id="contractor" class="form-select">
                                    <option selected>Select Contractor</option>
                                    @foreach ($contractors as $contractor)
                                        <option value="{{ $contractor->id }}">{{ $contractor->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="subContractor" class="">Sub Contractor</label>
                                <select name="subContractor_id" id="subContractor" class="form-select">
                                    <option value="">Select SubContractor</option>
                                    {{-- @foreach ($subContractors as $subContractor)
                                        <option value="{{ $subContractor->id }}">{{ $subContractor->name }}</option>
                                    @endforeach --}}
                                </select>
                            </div>
                        </div>

jquery included in blade file:

<script>
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN' : $('meta[name="_token"]').attr('content')
                }
            });
           
            
        $(document).ready(function() {
            $(".add").click(function() {
                console.log('click..')
                $("#contractor").change(function() {
                    var contractor_id = $(this).val()
                    
                    $.ajax({
                        url: '{{ url("/get_subContractors/") }}/'+contractor_id,
                        type: 'post',
                        datatype: 'json',
                        success: function(response) {
                            console.log(response);

                            if(response['subContractors'].length > 0) {
                                $.each(response['subContractors'], function(key, value) {
                                   $("#subContractors").append("<option id='"+value['id']+"'>"+value["name"]+"</option>")
                                });
                            }
                        }
                    })
                })
                              
                });
                
            });
    </script>

As I console log the response I get 404, what could have went wrong