Multiple functional ajax

I have an ajax, and with this I get some data which I use to consult the second ajax, the thing is that in the second ajax I organize some data and I must receive them in the first ajax to continue concatenating, but I only receive one undefined, what I really need is that the first ajax, stop until the second one ends, when the second one ends and I return the value there if I continue

(function ($) { 
  $.experience = function (){
    var experiencesBody = '<div class="card">';
    $.ajax({
      data: {
        id: $("body").data("id_user")
      },
      url: "experiencesController.php?tabla=experiences",
      dataType: 'json',
      method: 'POST',
      async: false,
      beforeSend: function( xhr ) {
        //xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
    .done(function( data ) {
      console.log(data);
      var experiences =  data['experiences'];
      $.each( experiences, function() {
        console.log(this);
        var opciones = {
          DayMonthYear: function() {
            return { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
          },
          MonthYear: function() {
            return { year: 'numeric', month: 'long'};
          },
          Year: function() {
            return { year: 'numeric'};
          },
          any: function(dia, mes) {
            if(dia && mes)
              return opciones.DayMonthYear();
            if(!dia && mes)
              return opciones.MonthYear();
            if(!dia && !mes)
              return opciones.Year();
          }
        };
        experiencesBody += '<div class="card-header">';
        experiencesBody += '<h5 class="card-title">';
        experiencesBody += this['title'];
        experiencesBody += '</h5>';
        experiencesBody += '<img src="';
        experiencesBody += this['companyImage'];
        experiencesBody += '" alt="Seadog Creative Labs." style="float: right;">';
        experiencesBody += '<h6 class="card-subtitle mb-2 text-muted">';
        experiencesBody += this['companyName'];
        experiencesBody += '</h6>';
        experiencesBody += '<small class="text-muted">Desde ';
        experiencesBody += new Date(this['startYear'], this['startMonth'], this['startDay']).toLocaleDateString("es-ES", opciones.any(this['startDay'] == null ? false : true, this['startMonth'] == null ? false : true));
        experiencesBody += ' a ';
        experiencesBody += new Date(this['endYear'], this['endMonth'], this['endDay']).toLocaleDateString("es-ES", opciones.any(this['endDay'] == null ? false : true, this['endMonth'] == null ? false : true));
        experiencesBody += '</small>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="card-body">';
        experiencesBody += '<h5 class="card-title">Funciones completadas</h5>';
        experiencesBody += '<ul class="list-group list-group-flush">';
        console.log(experiencesFunctions(this['id']));
        experiencesBody += '</ul>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="card-body">';
        experiencesBody += '<h5 class="card-title">Detalles sobre la experiencia</h5>';
        experiencesBody += '<ul class="list-group list-group-flush">';
        //console.log(experiencesFunctions(this['id']));
        experiencesBody += '</ul>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="card-body">';
        experiencesBody += '<h5 class="card-title">Descripción de la empresa</h5>';
        experiencesBody += '<ul class="list-group list-group-flush">';
        experiencesBody += '<li class="list-group-item">';
        experiencesBody += '<p class="card-text">';
        experiencesBody += this['companyDescription'];
        experiencesBody += '</p>';
        experiencesBody += '</li>';
        experiencesBody += '</ul>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="card-body';
        experiencesBody += this['companyWebsite'] === "N/A" ? "d-none" : "";
        experiencesBody += '">';
        experiencesBody += '<h5 class="card-title">Sitio web de la empresa</h5>';
        experiencesBody += '<a href="';
        experiencesBody += this['companyWebsite'];
        experiencesBody +='" class="card-link" target="_blank">';
        experiencesBody += this['companyWebsite'];
        experiencesBody += '</a>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="card-footer text-muted">';
        experiencesBody += '<footer class="blockquote-footer">';
        experiencesBody += this['contractType'];
        experiencesBody += '<cite title="Source Title">';
        experiencesBody += '<mark>';
        experiencesBody += this['companyLocation'];
        experiencesBody += '</mark>';
        experiencesBody += '</cite>';
        //falta el mapa!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        experiencesBody += '</footer>';
        experiencesBody += '</div>';
        experiencesBody += '</div>';
        experiencesBody += '<div class="mb-3"></div>';
        alert(experiencesBody);
      });


    })
    .fail(function(xhr, status, error) {
      console.log(xhr);
      console.log(status);
      console.log(error);
      swal("Error", "Algo salio mal... ", "error", {
        button: "Contactanos",
      })
      .then((value) => {
        swal({
          text: 'Ingresa tu mensaje',
          content: "input",
          button: {
            text: "Enviar",
            closeModal: false,
          },
        })
        .then(name => {
          swal('You typed: ${name}');
        });
      });   
    })
    .always(function() {
      //mensaje de mantenimiento.
      /*swal({
        title: "Defecto",
        text: "Mensaje por defecto",
        icon: "info",
        timer: 3000,
        button: true
      });*/
    });
  }
})($);


function experiencesFunctions(id_experience){
  console.log(id_experience);
    $.ajax({
      data: {
        id: id_experience
      },
      async: false,
      url: "experiencesController.php?tabla=experiencesFunctions",
      dataType: 'json',
      method: 'POST',
      beforeSend: function( xhr ) {
        //xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
    .done(function( data ) {
      var functions = "";
      $.each( data['functions'], function() {
        functions += '<li class="list-group-item">';
        functions += '<p class="card-text">';
        functions += this['description'];
        functions += '</p>';
        functions += '</li>';
      });
      return functions;
    })
    .fail(function() {
      swal("Error", "Algo salio mal... ", "error", {
        button: "Contactanos",
      })
      .then((value) => {
        swal({
          text: 'Ingresa tu mensaje',
          content: "input",
          button: {
            text: "Enviar",
            closeModal: false,
          },
        })
        .then(name => {
          swal('You typed: ${name}');
        });
      });   
    })
    .always(function() {
      //mensaje de mantenimiento.
      /*swal({
        title: "Defecto",
        text: "Mensaje por defecto",
        icon: "info",
        timer: 3000,
        button: true
      });*/
    });
  }