title: Fetching 2 ajax data simultaneously
body: <p>I have 2 tables on my html that I would like to fill in with data that would be fetched on mySQL server via PHP. Pardon me if I am not making sense, relatively new to websites</p>
  <p>I have declared my external <code>.js</code> files inside the <code>html &lt;body&gt;</code></p>
  <pre><code>&lt;script src=&quot;../bower_components/accounts/accounts.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../bower_components/accounts/userinfoRetrieval.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>As you can see from my <code>js</code> files, the functions are auto called upon load of the html page.</p>
  <p>I guess there is data conflict as I am fetching data from 2 php files at the same time. Hence my table values are not properly displayed. How can I go about fetching both the data and displaying them upon the page loads?</p>
  <p>account.js</p>
  <pre><code>var tableContents;
  var recipients =  new Array();
  getRecipients();
  
  function getRecipients() { //get account related info
          $.ajax({
              type: &quot;GET&quot;,
              url: &quot;../bower_components/accounts/accounts.php&quot;,
              dataType: &quot;json&quot;,
              data: {
                  json: JSON.stringify(recipients),
              },
              success: function(response){
                  recipients = response;
                  printData(recipients);
              }
          });
  }
  
  function printData(recipients){
      var x = &quot;0&quot;;
      
      for(var i in recipients){
          if (i%2 == 0){
              tableContents = $(&quot;&lt;tr class=\&quot;even gradeC\&quot;&gt;&quot;);
              jQuery('#accountsBody').append(tableContents);
  
          }
          else{
              tableContents = $(&quot;&lt;tr class=\&quot;odd gradeX\&quot;&gt;&quot;);
              jQuery('#accountsBody').append(tableContents);
          }
          tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;&lt;input name=\&quot;select\&quot; type=\&quot;checkbox\&quot; value=\&quot;&quot;+ i + &quot;\&quot;&gt;&lt;/td&gt;&quot;));
          tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;&quot; + recipients[i].recipientId + &quot;&lt;/td&gt;&quot;));
          tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;&quot; + recipients[i].username + &quot;&lt;/td&gt;&quot;));
          tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;&quot; + recipients[i].email + &quot;&lt;/td&gt;&quot;));
          tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;&quot; + recipients[i].phoneNo + &quot;&lt;/td&gt;&quot;));
          
          if (recipients[i].status === x){
              tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;Unapproved&lt;/td&gt;&quot;));
          }
          else{
              tableContents.append($(&quot;&lt;td style=\&quot;padding-left:18px\&quot;&gt;Approved&lt;/td&gt;&quot;));
          }
          tableContents.append($(&quot;&lt;/tr&gt;&quot;));
      }
      sorting();
  }
  </code></pre>
  <p>userinfoRetrieval.js</p>
  <pre><code>var tableContents;
  var userInfo =  new Array();
  
  getuserInfo();
  
  
  function getuserInfo() { //get account related info
          $.ajax({
              type: &quot;GET&quot;,
              url: &quot;../bower_components/accounts/userinfoRetrieval.php&quot;,
              dataType: &quot;json&quot;,
              data: {
                  json: JSON.stringify(userInfo),
              },
              success: function(response){
                  userInfo = response;
                  printData(userInfo);
              }
          });
  
  }
  
  function printData(userInfo){
      tableContents = $(&quot;&lt;tr&gt;&quot;);
      jQuery('#userinfoBody').append(tableContents);
  
      tableContents.append($(&quot;&lt;td&gt;&quot; + userInfo[0].userID + &quot;&lt;/td&gt;&quot;));
      tableContents.append($(&quot;&lt;td&gt;&quot; + userInfo[0].username + &quot;&lt;/td&gt;&quot;));
      tableContents.append($(&quot;&lt;td&gt;&quot; + userInfo[0].email + &quot;&lt;/td&gt;&quot;));
      tableContents.append($(&quot;&lt;td&gt;&quot; + userInfo[0].dob + &quot;&lt;/td&gt;&quot;));
      tableContents.append($(&quot;&lt;td&gt;&quot; + userInfo[0].phoneNo + &quot;&lt;/td&gt;&quot;));
  
      tableContents.append($(&quot;&lt;/tr&gt;&quot;));
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/WFFOP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFFOP.png" alt="enter image description here" /></a></p>
  <p>The first row(elijah) should be placed on the top table, instead of the one it is currently wrongly placed on. Hence there were undefined values</p>