JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elemImage" class="imgdiv">
  <img src="https://www.espritterroirs.fr/wpsacco/wp-content/uploads/coeur-150x150.png" name="image" width="150" height="120" id="myimage">
</div>
<div id="layer2" style="">
  <button onclick="populate()">Coeur aléatoire</button>
</div>
<div id="layer3" style="">
  <button onclick="effacer()">Effacer tout</button>
</div>


<div id="HeartScreen">

</div>

CSS

.imgdiv{
  display: none;
}
#layer2 {
  z-index: 99999;
}

JavaScript

let increment=0;

function clonePic(){
        // recuperation de la resolution de l'ecran chez l'utilisateur
        largeur = window.innerWidth;
        hauteur = window.innerHeight;
        // positionnement aleatoire
        posx = Math.round(Math.random()*largeur);
        posy = Math.round(Math.random()*hauteur);
        
        // recuperation de l'element div servant a afficher l'image
        elementDivImage = document.getElementById("elemImage").cloneNode(true);
        // ajustement de l'attribute style, notament left et top
        elementDivImage.style.position='relative';
        elementDivImage.style. left=posx+"px";
        elementDivImage.style.top=posy+"px";
        elementDivImage.style.width="150px";
        elementDivImage.style.height="120px";
        //elementDivImage.style.Zindex=increment++;
        elementDivImage.id = 'DivCoeur'+ increment;
        elementDivImage.style.display="inline-block";
        document.getElementById("HeartScreen").appendChild(elementDivImage);
        }
        
function populate() {
for (i=0; i<20; i++){
  clonePic();
}

}
function effacer(){
allHearts= document.getElementById('HeartScreen');
while (allHearts.firstChild) {
    allHearts.removeChild( allHearts.firstChild );
  }
}