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 listItem = $('<li/>');
listItem.appendTo(_songList);

var span = $('<span/>');
span.appendTo(listItem);

var link = $('<a/>', {
    id: 1,
    text: "Demo"
});
link.appendTo(span);

var removeIcon = $('<div/>', {
    class: "remove",
    songid: 1
});
removeIcon.appendTo(listItem);

var removeIconSvg = $('<svg/>');
removeIconSvg.appendTo(removeIcon);

var removeIconPath = $('<path/>', {
    d: "M0,2 L2,0 L12,10 L10,12z",
    fill: "#000"
});
removeIconPath.appendTo(removeIconSvg);

var removeIconPathTwo = $('<path/>', {
    d: "M12,2 L10,0 L0,10 L2,12z",
    fill: "#000"
});
                removeIconPathTwo.appendTo(removeIconSvg);
});