Is my implementation wrong?

Question

I have taken your advice and made the appropriate changes but I still cant see the data stored as metadata. Also do you have any advice on how to find out the time someone watched one video (out of 3) and which order they watched videos in? I am also attaching some pictures in case my implementation is wrong.

First the modified code:

videos über scibo

var videoList = [

{ id: 'video1', src: 'https://', label: 'Video 1' },
{ id: 'video2', src: 'https://', label: 'Video 2' },
{ id: 'video3', src: 'https://', label: 'Video 3' }

];

function shuffleArray(array) {

for (let i = array.length - 1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i + 1));
  [array[i], array[j]] = [array[j], array[i]];
}
return array;

}
videoList = shuffleArray(videoList);

var container = document.getElementById('tiktokContainer');
videoList.forEach(function(video) {

var item = document.createElement('div');
item.className = 'tiktok-item';

var playerWrapper = document.createElement('div');
playerWrapper.className = 'player-wrapper';
playerWrapper.id = video.id;

var videoElem = document.createElement('video');
videoElem.setAttribute('playsinline', '');
videoElem.setAttribute('muted', '');
videoElem.setAttribute('loop', '');
videoElem.setAttribute('preload', 'auto');
videoElem.src = video.src;

playerWrapper.appendChild(videoElem);

var overlay = document.createElement('div');
overlay.className = 'tiktok-overlay';
overlay.innerHTML = '<p>' + (video.label || '') + '</p>';

item.appendChild(playerWrapper);
item.appendChild(overlay);
container.appendChild(item);

});

var videoStats = {

  viewCounts: {},
  viewDurations: {},
  displayOrder: []

};

var currentVisibleVideoId = null;
var currentViewStart = null;

var observer = new IntersectionObserver(function(entries) {

entries.forEach(function(entry) {
  if (entry.intersectionRatio >= 0.75) {
    var newVideoId = entry.target.querySelector('.player-wrapper').id;
    if (currentVisibleVideoId !== newVideoId) {
      if (currentVisibleVideoId !== null && currentViewStart) {
        var elapsed = Date.now() - currentViewStart;
        videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
        var prevVideoElem = document.querySelector('#' + currentVisibleVideoId + ' video');
        if (prevVideoElem) {
          prevVideoElem.pause();
          document.getElementById(currentVisibleVideoId).classList.remove('active');
        }
      }
      currentVisibleVideoId = newVideoId;
      currentViewStart = Date.now();
      videoStats.viewCounts[newVideoId] = (videoStats.viewCounts[newVideoId] || 0) + 1;
      videoStats.displayOrder.push(newVideoId);

      var currentVideoElem = document.querySelector('#' + newVideoId + ' video');
      if (currentVideoElem) {
        document.getElementById(newVideoId).classList.add('active');
        currentVideoElem.play();
      }
    }
  }
});

}, { threshold: [0.75] });

document.querySelectorAll('.tiktok-item').forEach(function(item) {

observer.observe(item);

});

function scrollToItem(index) {

var items = document.querySelectorAll('.tiktok-item');
if (index < 0) index = 0;
if (index >= items.length) index = items.length - 1;
items[index].scrollIntoView({ behavior: 'smooth' });

}
document.addEventListener('keydown', function(e) {

var items = document.querySelectorAll('.tiktok-item');
var currentIndex = 0;
items.forEach(function(item, i) {
  if (item.querySelector('.player-wrapper').id === currentVisibleVideoId) {
    currentIndex = i;
  }
});
if (e.key === 'ArrowDown') {
  e.preventDefault();
  scrollToItem(currentIndex + 1);
} else if (e.key === 'ArrowUp') {
  e.preventDefault();
  scrollToItem(currentIndex - 1);
}

});

function updateHiddenInput() {
    console.log("Store data", videoStats);
    document.getElementById('IV01_01').value = JSON.stringify(videoStats);

}

window.addEventListener('beforeunload', function() {

if (currentVisibleVideoId && currentViewStart) {
  var elapsed = Date.now() - currentViewStart;
  videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
}
updateHiddenInput();

});

This is the data on console I saw using inspect.

variable implementation