title: Append mustache templates in loop
body: <p>I am trying to append the same mustache template several times but each time with different values that comes from php via ajax. The values are stored in an array.</p>
  
  <p>Unfortunately each appended template includes the values from the last entry in the array.</p>
  
  <p>If I add <code>alert("test");</code> at the end of the loop it is working. Do I have to wait until the append-function is finished? If so, how can I do that?</p>
  
  <p>Thanks!</p>
  
  <pre><code>$(document).ready(function postData() {
          var id = localStorage.getItem('user-id');
          var token = localStorage.getItem('user-token');
          var vars = "id=" + id + "&amp;token=" + token;
          var hr = new XMLHttpRequest();
          var url = "../php/getUsers.php";
  
            hr.onreadystatechange = function () {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                  var data = JSON.parse(hr.responseText);
  
                  for(var i=0;i&lt;data.length;i++){
  
                          var templateData = {
                              name: data[i].name,
                              id: data[i].id
  
                          };
                        var id=templateData['id'];
  
                        $.get('templates/user.htm', function(templates) {
  
                              var template = $(templates).filter('#user-template').html();
                              $('#user-container').append(Mustache.render(template, templateData));
                          });
                   //alert("Test"); 
                   }
              }
          }
          hr.open("POST", url, true);
          hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
          hr.send(vars);
      });
  </code></pre>