title: How to sort the loaded XML data
body: <p>In my application, I have an <code>XML</code> file that connects to different API and gathers information. Then in a <code>div</code>, it shows the fetched information. 
  I do it successfully, but the issue is, the <code>XML</code> will not load if element one by one. It loads data in parallel, so the <code>div</code>s it creates are not in the right order like how they are in the <code>xml</code> file.</p>
  
  <p>Here is a <strong><a href="https://jsfiddle.net/e0zs4v1k/" rel="nofollow">demo</a></strong> that get some data from local, SoundCloud, Spotify and iTunes.</p>
  
  <p>And this is the <a href="https://dl.dropboxusercontent.com/u/33538012/text.xml" rel="nofollow"><strong><code>XML</code> file</strong></a> it is loading from: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.ajax({
    url: "https://dl.dropboxusercontent.com/u/33538012/text.xml",
    dataType: "xml",
    success: parse,
    error: function() {
      alert("Error");
    }
  });
  
  function parse(document) {
    var inc = 1;
  
    $(document).find("track").each(function() {
      var rowNum = inc;
      var trackType = $(this).find('type').text();
      var trackTitle = $(this).find('title').text();
      var soundcloud_url = $(this).find('soundcloud_url').text();
      var spotify_track_uri = $(this).find('spotify_track_uri').text();
      var itunes_id = $(this).find('itunes_id').text();
      
      if (trackType == "audio") {
        inc = inc + 1;
        $(".playlist").append("&lt;div id='" + rowNum + "' &gt;" + rowNum + " " + trackTitle + "&lt;/div&gt;");
        
      } else if (trackType == "soundcloud") {
        inc = inc + 1;
        SC.initialize({
          client_id: "b8f06bbb8e4e9e201f9e6e46001c3acb"
        });
        SC.resolve(soundcloud_url).then(function(sound) {
          trackTitle = sound.title;
          $(".playlist").append("&lt;div id='" + rowNum + "' &gt;" + rowNum + " " + trackTitle + "&lt;/div&gt;");
        });
        
      } else if (trackType == "spotify") {
        inc = inc + 1;
        var spotifyLink = "https://api.spotify.com/v1/tracks/" + spotify_track_uri;
        $.getJSON(spotifyLink, function(data) {
          trackTitle = data.name;
          $(".playlist").append("&lt;div id='" + rowNum + "' &gt;" + rowNum + " " + trackTitle + "&lt;/div&gt;");
        });
        
      } else if (trackType == "itunes") {
        inc = inc + 1;
        var iTuensLink = "https://itunes.apple.com/lookup?id=" + itunes_id + "&amp;callback=?";
        $.getJSON(iTuensLink, function(data) {
          trackTitle = data.results[0].trackName;
          $(".playlist").append("&lt;div id='" + rowNum + "' &gt;" + rowNum + " " + trackTitle + "&lt;/div&gt;");
        })
      }
      
    });
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="playlist"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you look at the result of the code, the the number next to each row shows the order in the original <code>XML</code> file, but they are not loaded exactly one after each other.</p>
  
  <p>Any way to sort the loaded files just like how they are written in the <code>XML</code> file?  </p>