Javascript/jQuery Youtube API getJson - wrong values in Array

Question

I don't know what to do right now... Basically, the script does what it should, except that it stores the videos from the wrong playlist in an array.

Each time you recharge it does something completely different...

What is the reason for this? (translated with deepl translator)

$(function() {
  getUserName();
  createUserArray();
});

var arrayUserValues = [];

function getUserName() {
  $('.YoutubePlaylist').each(function() {
    arrayUserValues.push({
      "username": $(this).data('username'),
      "playlistId": $(this).data('playlist'),
      "videos": []
    });
  });
  console.log(arrayUserValues);
}

var VarpageToken = '';

function createUserArray() {
  var youtubeAPI = "https://www.googleapis.com/youtube/v3/playlistItems";

  var l = arrayUserValues.length;
  for (var i = 0; i < l; i++) {
    console.log('Start der API Abfrage');
    $.getJSON(youtubeAPI, {
        part: "snippet,contentDetails",
        playlistId: arrayUserValues[i].playlistId,
        maxResults: 50,
        pageToken: VarpageToken,
        key: "AIzaSyAOUkvDDyoGYAYstebVxUK_-pNOm-9eRog"
      })
      .done(function(response) {
        console.log('API Abfrage erfolgreich!');
        CreateArray(response);
        if (response.nextPageToken) {
          VarpageToken = response.nextPageToken;
          createUserArray();
        };
      })
      .fail(function(response) {
        console.log('There was an error!');
      });
  };
  console.log(arrayUserValues);
};

function CreateArray(response) {
  var l = arrayUserValues.length;
  var k = response.items.length;
  for (var j = 0; j < l; j++) {
    for (var i = 0; i < k; i++) {
      arrayUserValues[j].videos.push({
        "videoId": response.items[i].contentDetails.videoId,
        'title': response.items[i].snippet.title
      });
    };
  };
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="TheSoulrester" data-playlist="PLhArxQvLAFbJSgARn30qNMzrfM0x6ALjh" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PL7U_Zhi9_fcra0fyEISutVvFtQsb_zZxw" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PLhArxQvLAFbJZo_XpH1pFQ7fQjyeBHXTU" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

for example, the first playlist contains less than 50 videos - but according to the array, 212 videos are now included :(

the whole source code: Pastebin