JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="containers">
    Favorite
</div>

<div id="container2" class="containers">
    Favorite
</div>

<div id="container3" class="containers">
    Favorite
</div>

<div id="sidenav">
    <div class="favorite"> </div>
</div>

CSS

#sidenav {
    height:700px;
    width:250px;
    border: 1px solid rgb(150,150,150);
    position:absolute;
    display:inline;
    left: 125px;
}

#container {
    height:50px;
    width:75px;
    border:1px solid #000;
    position:absolute;
    
}

#container2 {
    height:50px;
    width:75px;
    border:1px solid #000;
    position:absolute;
    top:75px;
    
}

#container3 {
    height:50px;
    width:75px;
    border:1px solid #000;
    position:absolute;
    top:150px;
}

JavaScript

$(document).ready(function(){

var favorites = [];
var counter = 0;
    
    $('.containers').bind('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });

    
});