I have some elements I am looping through to get variables for ajax requests, but when I append the data to the page the results are in the order returned by the server not in the order I've requested them.

This is my code:

1. $('.playlist').each(function(videoPlaylistUrl) {
   
       var playListArtist = ($(videoPlaylistUrl).find('.rageArtist').html());
   
       var playListTrack = ($(videoPlaylistUrl).find('.rageTrack').text());
   
       var lastFmUrl = (
           'https://www.last.fm/music/' + playListArtist + '/_/' + playListTrack + '#track-page-video-playlink');
   
       $.ajax({
           url: lastFmUrl,
   
           success: function(response) {
               var lastFmLink = $(response).find('#track-page-video-playlink').attr('href');
               var lastFmTitle = $(response).find('.header-new-title').html();
               console.log(lastFmLink + ' ' + lastFmTitle)
   
               $('.rageUl').append(lastFmLink + ' - ' + lastFmTitle + '<br>')
           }
   
       });
   
   });
   

I know it's because ajax is asynchronous and sttting async to false works but freezes the browser as it should.

I have been looking at promises, but can't seem to make any sense from what I have read. Nothing I've tried seems to work.