JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SongList" class="list">
    <ul>
    </ul>
</div>

CSS

.list {
  left: 0px;
  bottom:0px;
  right: 0px;
  top: 40px;
  border-left:1px solid #ccc; 
  overflow-y:scroll !important;
  z-index:1;
}

.list ul {
  margin:5px 0;
  padding:0;
  list-style: none;
}

.list li {
  display:block; 
  position:relative; 
  width:100%; 
  height:22px;
  cursor: pointer !important;
}

.list li:hover {
  background-color: Gainsboro !important;
}

.list li a {
  text-decoration: none;
  color: black;
}

.list li:nth-child(even) {
  background-color: #eaeaea
}

.list li:active {
  background-color: #09f;
  color:#fff;
  text-shadow: 0 1px #06d;
  background-image:-webkit-gradient(linear,left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
}

.list li:active svg *{
  fill:#fff
}

.list span {
  position:absolute; 
  top:0;
  left:20px;
  right:60px; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  font: 12px/24px sans-serif;
} 

.remove {
  right:10px;
  width:20px; 
  height:22px; 
  cursor:pointer
}

.copy {
  right:30px; 
  width:20px; 
  height:22px; 
  cursor:pointer
}

.remove svg, 
.copy svg {
  position:absolute; 
  top:50%; 
  left:50%; 
  margin:-6px 0 0 -6px;
  width: 12px;
  height: 12px;
}

JavaScript

$(document).ready(function(){
    
var _songList = $('#SongList ul');

var html = '<li><span> <a id="'+ 1 + '">' + "Demo"+'</a> </span>';

    html += '<div class="remove" songid=' + 1 + '><svg><path d="M0,2 L2,0 L12,10 L10,12z" fill="#000" /> <path d="M12,2 L10,0 L0,10 L2,12z" fill="#000" /> </svg> </div>';

html += '</li>';
    
_songList.append(html);
});