Using $post Inside A For Loop Returns Blank (Undefined)

Question

I have the following function but adding an $post inside the for loop returns undefined. The console.log() however does display the correct results. I am unsure why this is occurring and would appreciate any advice.

  function renderTeamMembers(data, type, full, meta) {
    var team = data[2].split(",");
    var arrayLength = team.length;
    var team_members = "";
    var array = [];
    for (var i = 0; i < arrayLength; i++) {
      (function(i){
        var user_details = '';
        $.post('scripts/get_user_details.php', { id: team[i] }, function(data2) {
          var user_details = data2;
          console.log(user_details);
          team_members += '<span class="btn btn-success btn-xs">'+team[i]+'</span>';
        });
      })(i);
    }
    return team_members;
  }