Dynamic dropdown with select2 jquery and javascript not working

Question

i am trying to make a dynamic dropdown, with jquery and javascript,

this is my js code :

<script type="text/javascript">
    $(document).ready(function() {
        $('#id_up3').change(function(event) {
            var idUp3 = this.value;
            $('#id_ulp').html('');

            $.ajax({
                url: "/api/fetch-ulp",
                type: 'POST',
                dataType: 'json'{
                data: {id_up3: idUp3,_token:"{{ csrf_token() }}"},
                success:function(response){
                    $('#id_ulp').html('<option value="">ULP</option>');
                    $.each(response.ulp,function(index, val){
                        $('#id_ulp').append('<option value="'+val.id_ulp+'"> '+val.ulp+' </option>')
                    });
                }
            });
        });
    });
    
</script>

and this is the controller :

public function asset()
{
    $up3 = Up3Model::get(['up3', 'id_up3']);

    return view('v_asset',compact('up3'));
}

public function fetchUlp(Request $request)
{
    $data['ulp'] = UlpModel::where('id_up3', $request->id_up3)->get(['ulp', 'id_ulp']);

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

and this is my dropdown view that I packaged in a modal :

<div class="form-group"> 
                                    <select name="id_up3" id="id_up3" class="form-control @error('id_up3') is-invalid @enderror" value="{{ old('id_up3') }}">
                                        <option value="" selected>UP3</option>
                                        @foreach ($up3 as $data)
                                        <option value="{{ $data->id_up3 }}">{{ $data->up3 }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        @error('up3')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group">  
                                    <select name="ulp" id="id_ulp" type="text" class="form-control @error('id_ulp') is-invalid @enderror" data-placeholder="Pilih ULP" value="{{ old('id_ulp') }}">
                                        <option>ULP</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        @error('ulp')
                                        {{ $message }}
                                        @enderror
                                    </div>
                                </div>

this is the ajax route :

Route::post('api/fetch-ulp', [AssetController::class, 'fetchUlp']);

When I initially took the UP3 ID for fishing, the dynamic ULP dropdown appeared, the ID was already read, and when I finished the function code, the ULP dropdown did not appear according to the selected Up3 dropdown.