JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li id="play1">Video 1</li>
  <li id="play2">Video 2</li>
    <li id="play3">Video 3</li>
      <li id="play4">Video 4</li>
</ul>
<div id="player1"></div>
<div id="player2" style="display:none;"></div>
<div id="player3" style="display:none;"></div>
<div id="player4" style="display:none;"></div>
<script src="http://www.youtube.com/player_api"></script> 
<script>

        // create youtube player
        var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player1', {
      height: '390',
      width: '640',
      videoId: 'KcXxHZssCh4',
	   events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: 'ZGDwEr0GT10', 
	  events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
	 player3 = new YT.Player('player3', {
      height: '390',
      width: '640',
      videoId: 'Cgk-LdjxVZg', 
	  events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
	 player4 = new YT.Player('player4', {
      height: '390',
      width: '640',
      videoId: 'H5RsI3aIkVg', 
	  events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
    });
  }
		// autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }
$('#play1').click(function(){
	$('#player1').show();
	$('#player2, #player3, #player4').hide();
	
        Player.playVideo();
    

});
$('#play2').click(function(){
	$('#player2').show();
	$('#player1,#player3,...