Why each oo function/module after ajax, then each function/module attribute change to the last execute?

I tried to sync database return html string append to each .buttonContainer , use action.js execute other file loadButton module use parameter point specific element.

the result should be use different .buttonContainer and with their attr id connect db get result append to each .buttonContainer

My question is if I set ajax option async default true, then both return html string will append to the last .buttonContainer.

I can't understand I already set each module/function have their attr el from each execute parameter.

Why and how to solve it?

I tried to change async to false then it work but slowly the page, so I'm trying to find other solution.

<div class="buttonContainer" data-user-id="0"></div>
<div class="buttonContainer" data-user-id="1"></div>

action.js

define(['DomReady!', 'jquery', 'loadButton'],function (DomReady, $, loadButton) {
  return {
    init: function() {
      // loop each element as parameter and execute 
      $('.buttonContainer').each(function(index, el) {
        var config = {};
        config.el = $(this);

        loadButton.init(config);
      });
    },
  }
});

loadButton.js

define(['DomReady!', 'jquery'],function (DomReady, $) {
  return {
    init: function(config) {
      this.config = {};
      this.config.el = config.el;  // set each execute have their own private attribute

      this.onLoadAction();
    },
    onLoadAction: function() {
      this.onLoadController();
    },
    onLoadController: function() {
      var userId = this.config.el.attr('data-user-id');

      var mthis = this;
      this.onLoadRequestDB('load/'+userId).done(function(response) {
        console.log(mthis.config.el);
        var response = JSON.parse(response);
        mthis.config.el.append(response.button);
      });
    },
    onLoadRequestDB: function(url) {
      return $.ajax({
        url: url,
        type: 'GET',
        processData: false,
        contentType: false,
        // async: false
      });
    },
  }
});

Edit:

http://ift.tt/1HopZby I found some solution here, so I edit loadButton.js like this

..
init: function(config) {
          this.config = {};
          this.config.el = config.el;  // set each execute have their own private attribute

          this.onLoadAction(this.config);
        },
        onLoadAction: function(config) {
          this.onLoadController(config);
        },
        onLoadController: function(config) {
 ..

pass parameter, then it work.

But I still want to know why I set the loadButton.js init this, in each loop but still can be cover after ajax. makes all response append to element from last execute loadButton.js config parameter