JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/style.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <body>
        
        <section id="features" class="blue">
			<div class="content">		
				<hr id="demos"/>
				<h2>Add & Remove</h2>
                <div id="video-player">
                    <iframe id="video-iframe" frameborder="0" allowfullscreen></iframe>
                </div>
				<div class="slider add-remove">
					<!--<div><h3>1</h3></div>-->
				</div>
                
                <div class="buttons">
					<a href="javascript:void(0)" class="button js-add-FirstClass-slide">Add FirstClass</a>
                    <a href="javascript:void(0)" class="button js-add-SecondClass-slide">Add SecondClass</a>
                    <br>
					<a href="javascript:void(0)" class="button ToggleFirstClass">Toggle FirstClass</a>
                    <a href="javascript:void(0)" class="button ToggleSecondClass">Toggle SecondClass</a>
				</div>
            </div>
        </section>

    </body>

CSS

.sliderX{
        cursor: pointer;
        position: relative;
        font-size: 20px;
        top:-40px;
        right:-50px;
        height: 20px;
        padding: 0 0 0 0;
        z-index:1;
    }


.videosetter{
    
}
.videowrapper {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
}
.videowrapper iframe {
    position:relative;
    width:100%;
    height:100%;
}

.FirstClass{
    background:darkblue;
}

.SecondClass{
    background:green;
}
}

JavaScript

function add_video_listener(slideId, videoId){
	$('div[slide-id='+slideId+'] img').click( function(){
        $('#video-iframe').attr('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
    });
}


$(document).ready(function(){

        var slideId = 0;
        var slides = [];
        $('.add-remove').slick({
            slidesToShow: 3,
            slidesToScroll: 3
        });

        var target = '<div class="videowrapper"><img src="https://i.ytimg.com/vi/7WgYmnwO-Pw/hqdefault.jpg"/></div>';
    	var videoId = '7WgYmnwO-Pw';


        $('.js-add-FirstClass-slide').on('click', function() {        
            $('.add-remove').slick('slickAdd','<div class="FirstClass"  slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
            slides.push(slideId);
            add_video_listener(slideId, videoId);
            slideId++;
        });

        $('.js-add-SecondClass-slide').on('click', function() {
            $('.add-remove').slick('slickAdd','<div class="SecondClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
            slides.push(slideId);
            add_video_listener(slideId, videoId);
            slideId++;
        });





        var filtered = false;

        $('.ToggleFirstClass').on('click', function() {
            if (filtered === false) {
                $('.add-remove').slick('slickFilter', $('.FirstClass')); 
                filtered = true;
            } else {
                $('.add-remove').slick('slickUnfilter');
                filtered = false;
            }
        });

        $('.ToggleSecondClass').on('click', function() {
            if (filtered === false) {
                $('.add-remove').slick('slickFilter','.SecondClass'); 
                filtered = true;
            } else {
                $('.add-remove').slick('slickUnfilter');
                filtered = false;
            }
        });

        $('body').on('click', '.sliderX',...