Display a table that contains the list of technicians who have the selected tarificationtache

I have 4 tables: metier , tache, technicien and tarificationtache with a many to many relationship and in the pricing table I have the following fields id, tache-id, tariff and relation done on intermediate table technicien_tarificationtache technicien_id,tarificationtache_id

with this code I select a metier then i get the list of taches in relation with that metier already selected and then the list of tarificationtache in relation with the tache selected and now i would like to display in a table list of technicians in relation with tarificationtache selected.But no technician is displayed when i select tarificationtache. Could you please help me with this?

create.blade.php

@extends('Layouts/app')
@extends('Layouts/master')
@section('content')
<!--  jQuery -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
</script>
<script type="text/javascript">
var getTachesByMetierUrl = "";
var getAdresseByClientUrl = "";
var getTarificationsByTacheUrl = "";
var getTechniciensByTarificationUrl = " 
";

function getAdresseByClient(val) {
    if(val.length>0) {
        var client_id = val;
        $.get(getAdresseByClientUrl+'/'+client_id,function(res) {
            var html = '<option value="">-Select-</option>' ;
            $.each(res.adresses,function(index,item) {
                html+='<option 
value="'+item.id+'">'+item.code_postal+'</option>';
            });
            $('#adresses').html(html);

        });
    }
}


function getTachesByMetier(val) {
    if(val.length>0) {
        var metier_id = val;
        $.get(getTachesByMetierUrl+'/'+metier_id,function(res) {
            var html = '<option value="">-Select-</option>' ;
            $.each(res.taches,function(index,item) {
                html+='<option 
  value="'+item.id+'">'+item.libelle_tache+'</option>';
            });
            $('#taches').html(html);

        });
    }
}
function getTarificationsByTache(val) {

    if(val.length>0) {
        var tache_id = val;
        $.get(getTarificationsByTacheUrl+'/'+tache_id,function(res) {
            var html = '<option value="">-Select-</option>' ;
            $.each(res.tarifications,function(index,item) {
                html+='<option 
value="'+item.id+'">'+item.tarif+'</option>';
            });
            $('#tarifications').html(html);

        });
    }
}

function getTechniciensByTarification(val) {
    if(val.length>0) {
        var tarificationtache_id = val;




            $.get(getgetTechniciensByTarificationUrl+'/'+tarificationtache_id,function(res) {      

            var html = '<option value="">-Select-</option>' ;
            $.each(res.technicien,function(index,item) {
                html+='<option 
value="'+item.id+'">'+item.technicien_id+'</option>';
            });
            $('#technicien').html(html);

        });
    }
}

 </script>
 @if(count($errors))
 <div class="alert alert-danger" role="alert">
    <ul>
        @foreach($errors ->all() as $message)
            <li></li>
        @endforeach
    </ul>
</div>
@endif
<div class="container">
<div class="row"></div>
<div class="col-md-10">
    <h1>Ajout Intervention</h1>
    <form action=" " method="post">
        
        <div class="form-group">
            <label for="client">Client</label>
            <select onchange="getAdresseByClient(this.value)" 
  name="client_id" id="client" 
  class="form-control">
                <option value="">-Select-</option>
                @foreach($client as $t)
                    <option value="">
                        
                    </option>
                @endforeach
            </select>
        </div>


        <div class="form-group">
            <label for="">date intervention</label>

            <input class="form-control" type="date" id="example-date- 
   input" name 
   ="date_intervention" value="">
        </div>

        <div class="form-group">
            <label for="">description</label>
            <input type="text"  name ="description" class="form- 
  control"value=" 
  ">
        </div>


        <div class="form-group">
            <label for="">duree_prevu</label>
            <input class="form-control" type="datetime-local"  name 
="duree_prevu" value=" 
  ">
        </div>
<div class="form-group">
            <div class="col-md-12">
            <div class="col-md-4">
            <label>Metier: </label>
            <select onchange="getTachesByMetier(this.value)" 
style="width: 200px"    
class="productm form-control" id="metiers">
           <option value="">-Select-</option>
                @foreach($metiers as $t)
                    <option value="">
                        
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-md-4">
            <label>tache: </label>
            <select onchange="getTarificationsByTache(this.value)" 
  style="width: 200px" 
  class="productname form-control" name="tache" id="taches">
            <option value="">-Select-</option>
            </select>
        </div>

        <div class="col-md-4">
            <label>tarification: </label>
            <select 
  onchange="getTechniciensByTarification(this.value)" style="width: 200px" 
  class="productname form-control" name="tarification_id" 
  id="tarifications">
            <option value="">-Select-</option>
            </select>
        </div>

        <div class="col-md-4">
                    <label>technicien: </label>
                    <select style="width: 200px" class="productname 
   form-control" 
   name="technicien_id" id="technicien">
                        <option value="">-Select-</option>
                    </select>
                </div>


 </div>
 </div>

 </div>
 </div>
 </div>
 <link 


href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/css/bootstrap- 
datepicker.css" rel="stylesheet">

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> 
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.5.0/js/bootstrap- 
datepicker.js"></script>
@endsection

route.php

Route::get('/techniciensbytache/{tache_id}',         
'TechnicienController@getTechniciensByTache');

model.php

public function techniciens()
{
return $this- >belongsToMany 
('App\technicien','technicien_tarificationtache' 
       ,'tarificationtache_id','technicien_id');
}

via Chebli Mohamed