Return list from Ajax to append() function

Question

I have Getter and Setter so to speak. I want to return list to that div. I don't want to use any selectors if possible. :) I am not getting any errors, but still I don't see list returned. I just cant figure out why its not working.

function getTasks(id) {
  $.ajax({
    type: "POST",
    url: "http://" + site + "/task/tasks.php",
    global: false,
    data: {
      group_id: id
    },
    success: function(data) {
      listTasks(data);
    }
  });
}

function listTasks(data) {
  var tasks = JSON.parse(data);
  console.log(tasks);
  list = $("<ul />").addClass("group_events");
  for (y = 0; y < tasks.length; y++) {
    list.append(
      $("<li />")
      .text(tasks[y].task_name + " " + tasks[y].total)
    )
  }
  return list;
}

And I am calling them from here where div with .group_details is:

//list groups
function listGroups(groups) {
  if (groups.length > 0) {
    $("#page-groups").append(
      $("<div />").attr("id", "list_groups")
    )
    for (i = 0; i < groups.length; i++) {
      $("#list_groups").append(
        $("<div />")
        .css("display", "none")
        .addClass("group_row")
        .append(
          $("<div />")
          .addClass("group_details")
          .append(
            $("<h3 />").text(groups[i].groups_name)
          )
          .append(getTasks(groups[i].id))
        )
        .append(
          $("<div />")
          .addClass("group_actions")
          .append(
            $("<i />")
            .addClass("fa fa-pencil-square-o fa-lg")
            .attr("onclick", "openGroupModal(" + groups[i].id + ")")
          )
        )
      )
    }

    var delay_time = 0;
    $("#list_groups .group_row").each(function() {
      $(this).delay(delay_time).fadeIn();
      delay_time += 100;
    });

  } else {
    $("#page-groups").append(
      $("<div />").text("You don't have groups")
    )
  }