JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/pepper-grinder/jquery-ui.css">
<script src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script src="http://jplayer.org/latest/js/jplayer.playlist.min.js"></script>
<script src="https://github.com/charlesemerson/Jquery-File-Uploader/raw/master/themeswitchertool.js"></script>
<input id="tmp_duration" type="hidden" value="" />
<div id="jp_container_1" class="ui-widget">    
    <div id="jquery_jplayer_1" class="jp-jplayer">    
        <img id="jp_poster_0" />
    </div>
    <!--div class="jp-video-play">
            <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
        </div-->    
   <div class="jp-type-playlist"> 
        <div id="jpp" class="jp-gui jp-interface">            
            <div class="jp-progress">                
                <div class="jp-seek-bar">                    
                    <div class="jp-play-bar">
                    </div>                
                </div>            
            </div>            
            <div id="panel" class="ui-widget">
               
                <!-- /id="panel" -->                                     
                <div class="jp-current-time">00:05
                </div>  
              
                
                
                <div class="jp-seek-bar">
                  <div class="jp-play-bar"></div>
                </div>
                <div class="jp-duration">00:33
                </div>                    
                              
                <div class="ui-helper-clearfix">                
                </div>                         
                <div class="jp-controls-holder"> 
                    <!-- class="jp-controls-holder" -->                    
                    <div class="jp-controls">                 ...

CSS

.jp-controls {display: inline-block;}

.hidden {display:none;}
.jp-previous {float: left;}
.jp-title {float: left;}
.jp-play {float: left;}
.jp-pause{float: left;}
.jp-next {float: left;}
.jp-stop{float: left;}
.jp-mute{float: left;}
.jp-unmute {float: left;}
.jp-volume-max {float: left;}
.jp-current-time {float: left;}
.jp-duration {float: right;}
.btn-slide {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
    font-size: 52%;
    color:#0000FF;
 }
.btn-slide:hover {
    text-decoration:none;
    
}

JavaScript

$(document).ready(function() {
    ///init screen
    var total_length = $(".jp-type-playlist .jp-playlist ul li").length;
    console.log(total_length);
    var init_point = new Array(3);
    init_point[0] = 0;
    var list_length = new Array(3);
    var title = new Array(3);
    var mp = new Array(3);
    var oga = new Array(3);
    var m4v = new Array(3);
    var ogv = new Array(3);
    var webmv = new Array(3);
    var poster = new Array(3);
    var init_flag = 0;
    var flag_show = 0;
    var pl = new Array(4);
    pl[0] = new Array();pl[1] = new Array();pl[2] = new Array();pl[3] = new Array();

    for (i = 1; i < 4; i++) {
        list_length[i] = $(".jp-type-playlist #tabs-" + i + " ul li").length;
        title[i] = new Array(list_length[i]);
        mp[i] = new Array(list_length[i]);
        oga[i] = new Array(list_length[i]);
        m4v[i] = new Array(list_length[i]);
        ogv[i] = new Array(list_length[i]);
        webmv[i] = new Array(list_length[i]);
        poster[i] = new Array(list_length[i]);
        init_point[i - 1] = init_flag;

        for (j = 0; j < list_length[i]; j++) {
            title[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li").eq(j).text();
            mp[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("mp");
            oga[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("oga");
            m4v[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("m4v");
            ogv[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("ogv");
            webmv[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("webmv");
            poster[i][j] = $(".jp-type-playlist #tabs-" + i + " ul li a").eq(j).attr("poster");
            init_flag++;
        }
    }
    ///initial player with empty playlist
    var Playlist = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [     ], ///empty list, to...