How to display a table in a popup box with laravel and Javascript?

I have a form, with 4 comboboxes "Metier" "tache" "tacrification" and "technicien", I select a "Metier" and a "tache", after this I want that a popup box appears and show me a table that contains the "techniciens" and their "tarification" (of course only the "techniciens" that are related with the "tache" already selected). After this I select a "technician" from that table a now the form is completely filled with the "technician" and it's "pricing".

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>
<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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-  
datepicker/1.5.0/js/bootstrap- 
datepicker.js"></script>


    <script type="text/javascript">


    var getTachesByMetierUrl = "{{url('/tachesbymetier')}}";
    var getAdresseByClientUrl = "{{url('/adressebyclient')}}";
    var getTarificationsByTacheUrl = "{{url('/tarificationsbytache')}}";
 var getTechniciensByTarificationtacheUrl = "   
{{url('/techniciensbytarificationtache')}}";
    //console.log(getMetiersByTechnicienUrl, 
    getTachesByMetierUrl,getTarificationsByTacheUrl);


    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 getTechniciensByTache(val) {
        if(val.length>0) {
            var tache_id = val;
            $.get(getTechniciensByTacheUrl+'/'+tarificationtache_id,function(res) {
            var html = '<option value="">-Select-</option>' ;
            $.each(res.techniciens,function(index,item) {
                html+='<option value="'+item.id+'">'+item.nom+'</option>';
            });
            $('#techniciens').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 rowSelect(currentRow){
    //this is the code to set a dropdown menu using jquery
    var technicien_id = selectedRow.children[0].innerHTML;
    $("#your_technicien_dropdown_menu_id").val(technicien_id);
    }




</script>



@if(count($errors))
    <div class="alert alert-danger" role="alert">
    <ul>
        @foreach($errors ->all() as $message)
            <li>{{$message}}</li>
        @endforeach
    </ul>
    </div>
@endif
<div class="container">
    <div class="row"></div>
    <div class="col-md-10">
    <h1>Ajout Intervention</h1>
    <form action=" {{url ('intervention')  }}" method="post">
        {{csrf_field()}}
        <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="{{$t->id }}">
                        {{$t->user->nom}}
                    </option>
                @endforeach
            </select>
        </div>


        <div class="form-group">
            <label for="">date et heure </label>
            <input class="form-control" type="datetime-local"  name ="duree_prevu"                  
    value=" 
     {{old('duree_prevu')}}">
        </div>

        <div class="form-group">
            <label for="">description</label>
            <input type="text"  name ="description" class="form-control"value=" 
    {{old('description')}}">
        </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="{{$t->id }}">
                        {{$t->libelle_metier}}
                    </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>

        <table class="table table-bordered bg-light">
    <thead class="bg-dark" style=" color: white">
            <tr>
                 <th class="light-table-filter" data-table="order-table" placeholder="Filter"   
    style=" 

    color: #337ab7">technicien </th>
                 <th class="light-table-filter" data-table="order-table" placeholder="Filter"            
    style=" 
    color: #337ab7">Tache </th>
                <th class="light-table-filter" data-table="order-table" placeholder="Filter"        
    style=" 

    color: #337ab7">tarif </th>
                
               
                <th style="color: #337ab7" width="220px" style="vertical-align: 
     middle">Action</th>
                
            </tr>
            </thead>
            <tbody>
            @foreach($tarifications as $tarifications)
            <tr>
                <td>{{$tarifications->technicien->user->nom}}</td>
                <td>{{$tarifications->tache->libelle_tache}}</td>
                <td>{{$tarifications->tarif}}</td>
                
                <td>
                    <div class="form-group">
                        <div class="form-group">
                        
                        <input type="checkbox"  name ="tarifications" value="id">
                    </div>
                </td>
            </tr>
            @endforeach
            </body>
        </table>
    </div>
        <div class="form-group">
            <div class="form-group">
            <label for="">statut    :   </label>
            <input type="checkbox"  name ="statut" value="1" required autofocus>
        </div>
        <div class="form-group">
            <label for="">payement</label>
            <input type="checkbox"  name ="payement" value="">
        </div>
        <div class="form-group">

            <input type="submit" value = "enregistrer" class="form-control btn btn-         
    primary">
        </div>
</div>
 </div>
 </div>
<script>
    function getMessage(){
     $.ajax({
              type:'GET',
              url:your_url,
              dataType: 'json',
              success:function(tarifications_list){
                $table_body = $("#tbl_body_name");
                $table_body.empty();

                if (tarifications_list.length > 0) {
                    div_no_data.style.display = 'none';
                    $.each(tarifications_list, function (index, value) {
                        $table_body.append('<tr class="deselected" onclick="rowSelect(this)">' +
                            '<td style="text-align: left;">' + value.technicien_id  + '</td>' +
                            '<td style="text-align: left;">' + value.tache_id + '</td>' +
                            '</tr>');
                    });
                }
              }
            });
        }
</script>
@endsection

controller

public function create()

{

    $client = client::orderBy('id', 'asc')->get();
    $metiers = metier::orderBy('id', 'asc')->get();
    $technicien = Technicien::orderBy('id', 'desc')->get();
    $tarifications=tarificationtache::with(['technicien','tache'])->get(); 

    return view('intervention.create')->with('technicien', $technicien)-        
>with('client',$client)- 
 >with('metiers',$metiers)->with('tarifications',$tarifications);
}

/**
* Store a newly created resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @return \Illuminate\Http\Response
*/
public function store(InterventionRequest $request)
{
    $intervention = new Intervention();

    $intervention ->description =$request->input('description');
    $intervention ->duree_prevu =$request->input('duree_prevu');


    if($request->has('statut')){
    $intervention->statut = $request->input('statut');
    }else{
       $intervention->statut = 0;
    }

    $intervention ->technicien_id = $request->input('technicien_id');
    $intervention ->client_id = $request->input('client_id');
    $intervention ->tarification_id = $request->tarificationtache_id;
    $intervention->save();
    return redirect('intervention');




}