JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>SoundCloud Player</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css'>
    <link rel='stylesheet' href='styles/main.css'>
    <style></style>
</head>

<body id="soundcloud-player">

    <div class="ui container col">
        <div class="col">
            <div class="main">
                <div class="js-search-results search-results ui cards">

                </div>
            </div>
        </div>
    </div>
    <script src="https://connect.soundcloud.com/sdk/sdk-3.3.2.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js'></script>
    <script src="javascript/main.js"></script>
</body>

</html>

CSS

html,
body {
  height: 100%;
  width: 100%;
  min-height: 100%;
}

#soundcloud-player .col {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#soundcloud-player .col-left {
  width: 20%;
  height: 100%;
  background-color: #292929;
  overflow: auto;

  position: fixed;
  left: 0;
  top: 0;

  min-width: 200px;
  z-index: 1;
}

#soundcloud-player .col-right {
  width: 100%;
  height: 100%;
  overflow: auto;

  position: fixed;
  left: 0;
  top: 0;

  box-sizing: border-box;
  padding-left: 20%;
}

#soundcloud-player .main {
  box-sizing: border-box;
  padding: 30px;
  margin: 30px;
}

#soundcloud-player .input {
  width: 100%;
}

#soundcloud-player .input-search {
  width: 100%;
  display: block;
}

#soundcloud-player .search.icon {
  pointer-events: initial;
  cursor: pointer;
}

#soundcloud-player .search-results {
  justify-content: center;
  margin-top: 30px;
}

JavaScript

let SoundCloudAPI = {};
SoundCloudAPI.init = () => {
    SC.initialize({ client_id: 'cd9be64eeb32d1741c17cb39e41d254d' });
};
SoundCloudAPI.init();


SoundCloudAPI.getTrack = (inputVlue) => {
    SC.get('/tracks', {
        q: inputVlue
    }).then((tracks) => {
    		console.log(tracks);
        SoundCloudAPI.renderTracks(tracks);
    });
}
SoundCloudAPI.getTrack("alan walker");

SoundCloudAPI.renderTracks = (track) => {

        track.forEach(element => {

    //this the card that will add the button for
    let card = `<div class="card">
    <div class="image">
        <img class="image_img" src="${element.artwork_url || 'http://lorempixel.com/100/100/abstract/'}">
    </div >
        <div class="content">
            <div class="header">
                <a href="${element.permalink_url}" target="_blank">${element.title}</a>
            </div>
        </div>
</div >`;
    
    //here i add the card to DOM
    let searchResults = document.querySelector('.js-search-results');
    searchResults.innerHTML += card;

    // store the content of the button 
    let inBtn = `<i class="add icon"></i>
    <span>Add to playlist</span>`;
 
    // created button container 
    let btn = document.createElement("div");
    btn.classList.add("ui", "bottom", "attached", "button", "js-button");

    // added the content of the button 
    btn.innerHTML += inBtn;
    
    // here i add the the event Listener to the button 
    btn.addEventListener('click', () => {
        console.log("click");
    });

    //here i add the button to the last card have been created
    searchResults.querySelector(".card:last-child").append(btn);
    });
}