JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="song2187"><div id="poster" style="background:url(https://woobl.ru/_ld/21/26189666.jpg)"><div class="inner"><div id="track-fon"><div class="aPlay fa fa-play" onclick="aPlayer.call(2187,'/_ld/21/2187_Dread_Pitt_Wiza.mp3')"></div><i class="fa fa-plus-circle"></i></div><div id="times" data-cat="Electro House / Electronica" data-kbit="320" data-mb="6.08Mb" data-tm="2019-02-24 16:49"><i class="fa fa-clock-o"></i>2:39</div></div></div><div class="name"><b>Dread Pitt &amp; Wizard </b> <br> Underrated</div><div class="song-text"></div></div>




<div id="song2186"><div id="poster" style="background:url(https://woobl.ru/_ld/21/s10928894.jpg)"><div class="inner"><div id="track-fon"><div class="aPlay fa fa-play" onclick="aPlayer.call(2186,'/_ld/21/2186_Raim_Artur--Lav.mp3')"></div><i class="fa fa-plus-circle add"></i></div><div id="times" data-cat="Hip-hop/Rap" data-kbit="320" data-mb="8.11Mb" data-tm="2019-02-24 16:48"><i class="fa fa-clock-o"></i>3:32</div></div></div><div class="name"><b>Raim &amp; Artur </b> <br> Полетаем (Lavrushkin &amp; Eddie G Remix)</div><div class="song-text"></div></div>

CSS

::-webkit-scrollbar{width:4px!important;height:5px}
::-webkit-scrollbar-track-piece{background:border-box}
::-webkit-scrollbar-thumb:vertical{height:5px;background:#999}
::-webkit-scrollbar-thumb:horizontal{width:100px;background-color:#999}
:focus::-webkit-input-placeholder{color:transparent}
:focus::-moz-placeholder{color:transparent}
:focus::placeholder{color:transparent}

body {padding:0px;margin:0px;font-family:font1;font-size: 13px;}
#left {background:#e0eaec}
#logo {background:#fff;width:50px;height:50px}
#logo:before {content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    position: absolute;
    background: #fff url(/itm/gr.png) no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin: 7px 0px 0px 7px;}
i.fa.fa-bell {
    position: relative;
    padding: 5px;
    right: 45px;
    margin-right: -25px;
    top: 2px;
    background: yellowgreen;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
}
i.fa.fa-male {
    position: relative;
    padding: 5px;
    right: 90px;
    margin-right: -24px;
    width: 13px;
    top: 2px;
    background: #4285f4;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
i.fa.fa-male em {
    position: absolute;
    background: red;
    border-radius: 30px;
    padding: 1px 0px;
    width: 13px;
    border: 2px solid #e0eaec;
    font-style: normal;
    font-size: 10px;
    font-family: font3;
    margin: 5px 0px 0px 0px;
}
#logo input[type="text"] {
    background: #f2f4f8 url(/itm/ss.png) no-repeat 10px 7px;
    outline-style: none;
    background-size: 14px;
    font-family: font1;
    border: 0px;
    width: 177px;
    padding: 6px 10px 6px 35px;
    margin: 0px 0px 0px 70px;
    position: relative;
    top: 10px;
    border-radius: 30px;
}
div#login-kp {
    position: absolute;
    padding: 5px 10px;
    right: 10px;
    top: 14px;
    background: #5a6a7a;
    border-radius: 10px 0px 10px 5px;
    font-family: font1;
    color:...

JavaScript

$(document).on("click",".fa-plus-circle", function() {

id = $(this).parents().eq(3).attr('id');
id = id.split('song').join('');


apiList = $('#song'+id).html();
Likeid = $('.like'+id+' span').html();
apiList = apiList.split('<div id="like" class="like'+id+'" data="'+id+'"><i class="fa fa-heart"></i><span>'+Likeid+'</span></div>').join('').split('add').join('').split('noAdd').join('');
if(localStorage.getItem('apiList') !== null) { if(localStorage.getItem('apiList').indexOf('song'+id+'') != -1) {} else {
localStorage.setItem('apiList','<div id="song'+id+'">'+apiList+'</div>'+localStorage.getItem('apiList')+''); }
} else { localStorage.setItem('apiList','<div id="song'+id+'">'+apiList+'</div>'); }
$(this).removeClass('fa-plus-circle').addClass('fa-check-circle');
});

$('.fa-plus-circle').each(function() {
id = $(this).parents().eq(3).attr('id');
if(localStorage.getItem('apiList').indexOf(id) != -1) { $('#'+id+' .fa-plus-circle').removeClass('fa-plus-circle').addClass('fa-check-circle'); }
});

$(document).on("click",".fa-check-circle", function() {
id = $(this).parents().eq(3).attr('id');

if(localStorage.getItem('apiList').indexOf(id) != -1) {
removeThis = $('#'+id).html(); 
removeSong = localStorage.getItem('apiList').split('<div id="'+id+'">'+removeThis+'</div>').join('');

localStorage.setItem('apiList',removeSong);
$(this).addClass('fa-plus-circle').removeClass('fa-check-circle');
}
});