jquery $ .ajax vs $ .when异步多任务

Question

我有以下结构：

[input=text]    ||    [select=field]    ||    [button]

   John                  London                Press

按下按钮后会发生这种情况：

[input=text]    ||    [select=field]    ||    [button]

  John                  London                AjaxLoad.gif
  Maria                 New York                Press

所以......

[input=text]    ||    [select=field]    ||    [button]

  John                  London                AjaxLoad.gif
  Maria                 New York              AjaxLoad.gif
  Alfredo               Lisbon                  Press

当按下按钮时，执行ajax函数并且ajaxload的gif保留在该行中，直到它从ajax返回结果。问题是，它是1比1完成的，而不是同时完成的。

$.ajax({
  type: "POST",
  url: "addFields.php",
  data: {name: name, category: category},
  async: true,
  success: function(data){
      $(field_id).html(data);
  }
});

我搜索了一下，发现我可以使用$.when，这可能会满足我的需求......但不幸的是，它实际上与$.ajax相同。它只执行1比1而不是同时执行。

$.when(
    $.get("addFields.php", {name: name, category: category}, function(data){
        info = data;
    })
).done(function(){
    $(field_id).html(info)
});

我做错了什么或者这应该有用吗？

编辑（1）： Here's the jsfiddle这样你们就可以更好地了解我的所作所为。正如你所看到的那样，它们都是动态的，没有限制。