JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div style="display:flex;justify-content:center;align-items:center;">
    <div style="width:400px;height:300px;">
        <div data-video="JC08Fu3QfJg" data-autoplay="0" data-loop="1" id="youtube-audio1"></div>
        <div data-video="7_WWz2DSnT8" data-autoplay="0" data-loop="1" id="youtube-audio2"></div>
        <div data-video="t3217H8JppI" data-autoplay="0" data-loop="1" id="youtube-audio3"></div>
        <div data-video="cbZ7V2ifh20" data-autoplay="0" data-loop="1" id="youtube-audio4"></div>
        <div style="clear:both;margin:10px;text-align:center">
            <p>The audio player is created with the YouTube API.</p>
            <p>Read Tutorial: <a href="http://www.labnol.org/internet/youtube-audio-player/26740/">YouTube Audio Player</a></p>
        </div>
    </div>
</div>

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player1, player2, player3, player4;
  function onYouTubeIframeAPIReady() {

    var ctrlq1 = document.getElementById("youtube-audio1");
    ctrlq1.innerHTML = '<img id="youtube-icon1" src=""/><div id="youtube-player1"></div>';
    ctrlq1.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq1.onclick = toggleAudio1;

    player1 = new YT.Player('youtube-player1', {
      height: '0',
      width: '0',
      videoId: ctrlq1.dataset.video,
      playerVars: {
        autoplay: ctrlq1.dataset.autoplay,
        loop: ctrlq1.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady1,
        'onStateChange': onPlayerStateChange1 
      } 
    });

    var ctrlq2 = document.getElementById("youtube-audio2");
    ctrlq2.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player2"></div>';
    ctrlq2.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq2.onclick = toggleAudio2;

    player2 = new YT.Player('youtube-player2', {
      height: '0',
      width: '0',
      videoId: ctrlq2.dataset.video,
      playerVars: {
        autoplay: ctrlq2.dataset.autoplay,
        loop: ctrlq2.dataset.loop,
      },
      events: {
        'onReady': onPlayerReady2,
        'onStateChange': onPlayerStateChange2
      } 
    });

    var ctrlq3 = document.getElementById("youtube-audio3");
    ctrlq3.innerHTML = '<img id="youtube-icon3" src=""/><div id="youtube-player3"></div>';
    ctrlq3.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
    ctrlq3.onclick =...