JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>

<div id="demo">
    <h4>
        Current page: <span id="currentpage">(none)</span>
    </h4>

    <div id="content"></div>

    <a href="#" id="navigate-allison">Navigate to Allison</a><br />
    <a href="#" id="navigate-eric">Navigate to Eric</a>

    <h4>
    Event log:
    </h4>
    <ul id="log">
    </ul>
</div>

<p>
    Use the links to navigate to a different "page". When a page is loaded, the video is embedded using the async API and a "play" listener is added. When the user clicks "play", a single "Started playing..." line should be added to the event log below the video.
</p>
<p>
    To replicate the issue:
</p>
<ol>
    <li>Click the "Navigate to Allison" link.</li>
    <li>Play the Allison video; one event log line should be added.</li>
    <li>Click the "Navigate to Eric" link.</li>
    <li>Play the Eric video; one event log line should be added.</li>
    <li>Click the "Navigate to Allison" link.</li>
    <li>Play the Allison video</li>
</ol>

<p>
    At this point, two new event log entries will be added.
</p>

CSS

#demo {
    background: white;
    border: 1px solid black;
    margin: 20px;
    padding: 0 20px;
}

JavaScript

var currentPage = "";
var currentPageVideo = null;

var log = document.getElementById('log');

var videos = {
	allison: 'gga9b2w7d1',
    eric: '7f7txr3x5e'
};

var content = document.getElementById('content');
var videoInitialized = [];//empty array we can pass initialized videos into
window._wq = window._wq || [];

function navigateTo(page) {
	if (page != currentPage) {
    
    	// remove existing video
        if (currentPageVideo) {
        	currentPageVideo.remove();
        }
    
    	currentPage = page;
        
        document.getElementById('currentpage').innerText = currentPage;
        
    	// create div for video
    	content.innerHTML = "";
        var videoDiv = document.createElement('div');
        videoDiv.className = [
        	"wistia_embed",
            "wistia_async_" + videos[currentPage]        
        ].join(' ');
        videoDiv.style = "width: 320px; height: 240px;"
        content.appendChild(videoDiv);
        
        // embed video
        
        hashedID = videos[currentPage];
        _wq.push({id: hashedID, onHasData: function (video) {
        if(videoInitialized.indexOf(hashedID) == -1){//check if the video has already been initialized and only do this if it hasn't

            var logEntry = document.createElement('li');
            logEntry.innerText = "Got data for " + page;
            log.appendChild(logEntry);
            videoInitialized.push(hashedID);//push the video id into the array
        }
        }})
        _wq.push({id: hashedID, onHasData: function (video) {
        //do this every time
        
        	currentPageVideo = video;
        	video.bind('play', function () {
            	var logEntry = document.createElement('li');
            	logEntry.innerText = "Started playing " + page;
                log.appendChild(logEntry);
            });
            videoInitialized.push(hashedID);//push the video id into the array
        
        }})
    }
   ...