JSFiddle - React, Tailwind, and code Playground

HTML

<!--первый плеер  -->
<div class="audio-item">
	<div class="player">
		<div class="pl"></div>
		<div class="meta-block">
			<div class="artist">О любви</div>
			<div class="desc">Романтика, инструментальная</div>
			<div class="title"></div>
		</div>
		<div class="cover"></div>
		<div class="controls">
			<div class="play"></div>
			<div class="pause"></div>
			<div class="rew"></div>
			<div class="fwd"></div>
		</div>
		<div class="volume"></div>
		<div class="tracker"></div>
	</div>
	<ul class="playlist">
		<li audiourl="http://tatianamaksimovich.ru/projects/kudrovo/01.mp3" cover="img/mp3/cover1.jpg">
			<span class="name-track">Песня 1</span>
			<span class="time-track">3:08</span>
		</li>
		<li audiourl="http://tatianamaksimovich.ru/projects/kudrovo/02.mp3" cover="img/mp3/cover2.jpg">
			<span class="name-track">Песня 2</span>
			<span class="time-track">3:08</span>
		</li>
		<li audiourl="http://tatianamaksimovich.ru/projects/kudrovo/03.mp3" cover="img/mp3/cover3.jpg">
			<span class="name-track">Песня 3</span>
			<span class="time-track">3:08</span>
		</li>
	</ul>
</div>

<!--второй плеер  -->
<div class="audio-item">
	<div class="player">
		<div class="pl"></div>
		<div class="meta-block">
			<div class="artist">О любви</div>
			<div class="desc">Романтика, инструментальная</div>
			<div class="title"></div>
		</div>
		<div class="cover"></div>
		<div class="controls">
			<div class="play"></div>
			<div class="pause"></div>
			<div class="rew"></div>
			<div class="fwd"></div>
		</div>
		<div class="volume"></div>
		<div class="tracker"></div>
	</div>
	<ul class="playlist">
		<li audiourl="http://tatianamaksimovich.ru/projects/kudrovo/04.mp3" cover="img/mp3/cover1.jpg">
			<span class="name-track">Песня 1</span>
			<span class="time-track">3:08</span>
		</li>
		<li audiourl="http://tatianamaksimovich.ru/projects/kudrovo/05.mp3" cover="img/mp3/cover2.jpg">
			<span class="name-track">Песня 2</span>
			<span class="time-track">3:08</span>
		</li>
		<li...

CSS

.audio-item {
  width: 100%;
  margin-top: 30px; }
  .audio-item .player {
    background-color: #f1f2f4;
    height: 100px;
    width: 100%;
    position: relative;
    z-index: 2; }
  .audio-item .meta-block {
    left: 116px;
    position: absolute;
    top: 25px;
    width: 50%;
    padding-right: 15px;
    overflow: hidden; }
  .audio-item .title, .audio-item .artist {
    font-family: "Open Sans", sans-serif;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .audio-item .title {
    color: #6a6a6a;
    font-size: 1.2rem;
    font-weight: 600; }
  .audio-item .artist {
    color: #262626;
    font-size: 1.4rem;
    font-weight: bold; }
  .audio-item .pl {
    cursor: pointer;
    height: 22px;
    width: 22px;
    position: absolute;
    right: 15px;
    top: 38px;
    -webkit-mask: url(../img/icon/list-elements.svg) no-repeat 50% 50%;
            mask: url(../img/icon/list-elements.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: #999;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    .audio-item .pl:hover {
      background-color: #262626; }
  .audio-item .cover {
    background-size: cover;
    -webkit-border-radius: 0;
            border-radius: 0;
    width: 94px;
    height: 100px;
    left: 0;
    top: 0;
    position: absolute; }
  .audio-item .controls .rew, .audio-item .controls .fwd {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 38px;
    -webkit-mask: url(../img/icon/previous-track.svg) no-repeat 50% 50%;
            mask: url(../img/icon/previous-track.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
    background-color: #999;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    .audio-item .controls .rew:hover, .audio-item .controls .fwd:hover {
  ...

JavaScript

$('.audio-item').each(function() {

    var $container=$(this);

    // inner variables
    var song;
    var tracker = $container.find('.tracker');
    var volume = $container.find('.volume');
    var dVol = 0.8;

    function initAudio(elem) {
        var url = elem.attr('audiourl');
        var title = elem.find('.name-track').text();
        var cover = elem.attr('cover');
        var artist = elem.attr('artist');

        $container.find('.player .title').text(title);
        $container.find('.player .artist').text(artist);
        $container.find('.player .cover').css('background-image','url('+cover+')');

        song = new Audio(url);

        song.volume = dVol;

        // timeupdate event listener
        song.addEventListener('timeupdate',function (){
            var curtime = parseInt(song.currentTime, 10);
            tracker.slider('value', curtime);
        });

        $container.find('.playlist li').removeClass('active');
        elem.addClass('active');
    }
    function playAudio() {
        song.play();

        //tracker.slider("option", "max", song.duration);

        $container.find('.play').addClass('hidden');
        $container.find('.pause').addClass('visible');

        // автопроигрывание следующего трека
        song.addEventListener('ended', function(){
          stopAudio();

          var next = $container.find('.playlist li.active').next();
          if (next.length == 0) {
            next = $container.find('.playlist li:first-child');
          }
          initAudio(next);

          playAudio();

          song.addEventListener('loadedmetadata', function() {
            tracker.slider('option', 'max', song.duration);
          });
        });
    }
    function stopAudio() {
        song.pause();

        $container.find('.play').removeClass('hidden');
        $container.find('.pause').removeClass('visible');
    }

    // play click
    $container.find('.play').click(function (e) {
        e.preventDefault();

       ...