JSFiddle - React, Tailwind, and code Playground

HTML

<script>
(function(){
var i = 0;
// Define at which percentages you want to fire an event
var markers = [1,2,3,4,5,10,25,50,70,75,90];
var playersMarkers = [];

function findObjectIndexById(haystack, key, needle) {
    for (var i = 0; i < haystack.length; i++) {
        if (haystack[i][key] == needle) {
            return i;
        }
    }
    return null;
}

while (true) {
    var player = jwplayer(i);
    if (!player.id)
        break;
    
    playersMarkers.push({
      'id': player.id,
      'markers': []
    }); 

    player.onPlay(
        function(e){
            dataLayer.push({
                "event": "video",
                "player_id": this.id,
                "interaction": "Play",
                "video_url": this.getPlaylistItem().file,
                "duration": this.getDuration(),
                "width": this.getWidth(),
                "height": this.getHeight(),
                "position": this.getPosition(),
                "resolutions": [].map.call(this.getQualityLevels(), function(obj) {  return obj.label;}),
                "volume": this.getVolume(),
                "player_type": this.renderingMode
            });   
        }
    );
  
    player.onComplete(
      function(e){
            dataLayer.push({
                "event": "video",
                "player_id": this.id,
                "interaction": "Complete",
                "video_url": this.getPlaylistItem().file,
                "duration": this.getDuration(),
                "width": this.getWidth(),
                "height": this.getHeight(),
                "position": this.getPosition(),
                "resolutions": [].map.call(this.getQualityLevels(), function(obj) {  return obj.label;}),
                "volume": this.getVolume(),
                "player_type": this.renderingMode
            });            
      }
    );
  
    player.onPause(
      function(e){
            dataLayer.push({
                "event": "video",
                "player_id":...