JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<ul id="video-thumbs">
    <li class="current" style="margin-left: 0;">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/Qdse1SEBimw'"></div>
    <img src="files/lamb.png" width="326" height="181">
    </li>
    <li>
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/WZknytdWWhI'"></div>
    <img src="files/tuna.png" style="width: 326px">
    </li>
    <li style="margin: 0 0 0 11px">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/BAembvTjChs'"></div>
    <img src="files/myers.png" width="326" height="181">
    </li>
</ul>

CSS

.current {
 border: 1px solid red;   
}

JavaScript

$(document).ready(function(){
    $("#video-thumbs li").click(function(e){
        e.preventDefault();
        $("#video-thumbs li").addClass("current").not(this).removeClass("current");
      });

});