JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player"></div>
<div id="player2"></div>
<div id="player3"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;     
var playertwo;    
var playerthree;  
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
        playertwo = new YT.Player('player2', {
          height: '315',
          width: '560',
          videoId: '1z_OJOONQak',
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
        playerthree = new YT.Player('player3', {
          height: '315',
          width: '560',
          videoId: '-79uIRQiAFM',
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }
  
      function onPlayerStateChange(event) {
        if (event.data == 1 ) {
           $('.text-test').text( 'WORK!' );
        }
        if (event.data == 2 ) {
          $('.text-test').text('DONT WORK!');
        }
      }

$(document).ready(function() {
    $( "#player" ).after( "<div class='text-test'>Test</div>" );
    $( "#player2" ).after( "<div class='text-test'>Test</div>" );
    $( "#player3" ).after( "<div class='text-test'>Test</div>" );
});
</script>