Dynamic SELECT don't work

Hey guys. I've been trying for three days to build a dynamic SELECT but I can't. Indeed, the two dropdowns are not automatically filled

My JS Code

<script>
$(document).ready(function () {
/*------------------------------------------
Diocese Dropdown Change Event
--------------------------------------------*/
$('#Diocese-dropdown').on('change', function () {
var  Id_Dioc = this.value;
$("#region-dropdown").html('');
$.ajax({
url:  "{{url('api/fetch-regions')}}",
type:  "POST",
data: {
diocese_id:  Id_Dioc,
_token:  '{{csrf_token()}}'
},
dataType:  'json',
success:  function (result) {
$('#region-dropdown').html('<option value="">-- Select region--</option>');
$.each(result.regions, function (key, value) {
$("#region-dropdown").append('<option value="' + value.id + '">' + value.Nom_Region + '</option>');
});
$('#section-dropdown').html('<option value="">-- Select section --</option>');
}
});
});
/*------------------------------------------
region Dropdown Change Event
--------------------------------------------*/
$('#region-dropdown').on('change', function () {
var  idregion = this.value;
$("#section-dropdown").html('');
$.ajax({
url:  "{{url('api/fetch-sections')}}",
type:  "POST",
data: {
region_id:  idregion,
_token:  '{{csrf_token()}}'
},
dataType:  'json',
success:  function (res) {
$('#section-dropdown').html('<option value="">-- Select section --</option>');
$.each(res.sections, function (key, value) {
$("#section-dropdown").append('<option value="' + value.id + '">' + value.Nom_Section + '</option>');
});
}
});
});
});
</script>

My Blade Code

<div  class="form-row">
    <select  id="Diocese-dropdown"  class="form-control">
	    <option  value="">-- Votre Diocese --</option>
		    @foreach ($dioceses as $data)
		    <option  value="{{$data->id}}"> {{$data->Nom_Diocese}}</option>
		    @endforeach
	</select>
</div>
<div  class="form-row">
	<select  id="region-dropdown"  class="form-control
	</select>
</div>
<div  class="form-row">
	<select  id="section-dropdown"  class="form-control"></select>
</div>

My Controller

<?php
namespace  App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Dioceses;
use App\Models\Regions;
use App\Models\Sections;

class  DropdownController  extends  Controller{

public  function  index(){
$data['dioceses'] = Dioceses::get(["Nom_Diocese", "id"]);
return  view('new-jeciste', $data);}

public  function  fetchRegions(Request  $request){
$data['regions'] = Regions::where("diocese_id", $request->diocese_id) ->get(["Nom_Region", "id"]);
return  response()->json($data);}

public  function  fetchSections(Request  $request){
$data['sections'] = Sections::where("region_id", $request->region_id)->get(["Nom_Section", "id"]);
return  response()->json($data);}
}

I tried a dd($data) in the controller to get an idea of what the form returns at the "api/fetch-regions" route but nothing there. Thank you for your help. After activating the first dropdown, the other two display "Nothing Selected".