call attributes through multiple relationships and select multiple

I am relatively new working in Laravel, and I am learning on the fly, this time I'm stuck, and where I am I can not watch videos to try to solve the doubt that I have in these moments, hopefully they will ask me to help.

I have a relationship between 3 tables,

one is called instances, another is called a server, and another one is called serverinstances.

I have a field where I choose a server, and from that field, I fill in another field with the instances that are stored on that server.

Well, since that relationship is in the server instances table, it brings me the IDS, with which it is related, but I do not know how to bring the name of the instance, because that is in the table of the intancias, and as I am using JQUERY I do not know what to do to bring the name when the change is made.

In the following image I show how I wear it.

This is the select where I bring the servers

<label>Seleccionar Servidor</label>

<select name="servidor" id="servidor" class="chosen"> 
<option value="">Seleccionar Servidor</option> 
@foreach($servidores as $servidor) 
<option value="{{ $servidor->id }}">{{ $servidor->ip }}</option> 
@endforeach 
</select>

<br><br>

Here are the instances loaded:

<label>Instancias</label>
<select name="instancia" id="instancia" multiple="multiple" style="width: 100%"> 
<option value="" >Selecciona un Servidor Primero</option>
</select>

and this is the function you create to fill the information in the previous field

<script> 
var rutaConsulta55 = "{{ route('admin.ruta.consulta.instancia') }}"; 
$(document).ready(function(){ 
selectChange55(); 
}); 

function selectChange55(){ 
$('#servidor').on('change', function(e){ 
var idServer = $(this).val(); 
ajaxSelect55(idServer); 

}); 
} 

function ajaxSelect55(id)
    { 
    $.ajax({ 
    type: 'POST', 
    headers: { 
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    },
    url: rutaConsulta55, 
    data: {id: id}, 
    dataType: 'json', 
    beforeSend: function(){ 
    } 
    }).done(function(response) { 
    var html = '<option value="" >Selecciona una opción</option>'; 
    $.each(response.ixs, function(i, elem){ 
    html += '<option value="'+ elem.id + 'class="chosen" name="instancias[]" id = "instancias"'  + '">'+ elem.id_instancia + '</option>' 
    }); 
    $('#instancia').html(html); 
    }).fail(function(data) { 

    }); 
    }  
</script>

But as I repeat, I do not know how to make the name.

And the most difficult thing, with what I have hit against the wall, the fundamental thing really, and it is, that when I select several, it only saves me the first one that I have selected, I am missing something in the store function , but I really have not found like.

Thanks for reading. I hope you can help me.

EDIT

Controller

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Collection;
use Illuminate\Http\JsonResponse;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Indisponibilidades;
use App\SistemasOperativos;
use App\Servidores;
use App\Ixs;
use App\Instancias;



class IndisponibilidadController extends Controller
{    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {

        $items = Indisponibilidades::with('parentIndisponibilidades','server','ixs','sxi','instancias')->get();

        return view('admin.indisponibilidadVistas.index', compact('items'));
    }


    public function consultarInstancias(Request $request) 
    { 
        $servidores = $request->id;

        $instancias = Ixs::where('id_servidor', $servidores)->get(); 

        $respuesta2 = array(); 
        $respuesta2['ixs'] = $instancias->toArray(); 
        return response()->json($respuesta2); 
    }



    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $instancias2 = Instancias::orderBy('nombre','asc')->get();
        $servidores = Servidores::orderBy('ip','asc')->get(); 
        $ixs = Ixs::orderBy('id_instancia','asc')->get(); 
          return view ('admin.indisponibilidadVistas.create', compact('servidores','instancias2','ixs')); 
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        Indisponibilidades::create($request->all());

        //return back()->withSuccess(trans('app.success_store'));
        return redirect()->route(ADMIN.'.indisponibilidadRoute.index')->withSuccess(trans('app.success_store'));

    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $item = Indisponibilidades::findOrFail($id);

        return view('admin.indisponibilidadVistas.edit', compact('item'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {

        $item = Indisponibilidades::findOrFail($id);
        $item->update($request->all());
        //return back()->withSuccess(trans('app.success_update'));
        return redirect()->route(ADMIN.'.indisponibilidadRoute.index')->withSuccess(trans('app.success_update'));
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        Indisponibilidades::destroy($id);

        return back()->withSuccess(trans('app.success_destroy'));
    }
}