JSFiddle - React, Tailwind, and code Playground

HTML

<img class="pomme" id="Verte" 
src="http://www.leclaireurdechateaubriant.fr/files/2013/09/Pomme-630x0.jpg" alt="pomme">
<img class="pomme" id="Jaune" 
    src="http://media.meltyfood.fr/article-1083946-ajust_930/les-golden-pomme-la-plus-repandue-sur-vos.jpg" alt="pomme" >    
<button id="add_elem">Add elem.</button>
<button id="clear_elem">Clear</button>
<div class="panier" id="elem"></div>

CSS

.panier{
    margin-top : 20px;
    min-height : 150px;
}

.pomme{
    height : 100px;
}

JavaScript

$(function(){
    
    var tab = [];
    var nb_elem = 0;
    var tab_elem = [];
    tab.push($("#Verte"), $("#Jaune"));
    
    tab[0].hide();
    tab[1].hide();
    
    $("#add_elem").click(function(){
        if (nb_elem < 3){
            var Brand = Math.round(Math.random());
            tab_elem.push(Brand);
            $("#elem").append(tab[Brand].clone().show()); 
            nb_elem++;
            if (nb_elem === 3){ $("#elem").append(tab_elem.toString()); }
        }
    });
    
    $("#clear_elem").click(function(){
        $("#elem").empty(); 
        tab_elem = [];
        nb_elem = 0;
    });
    
});