Javascript- appending multiple items

Question

var blackjackRandom=Math.floor(Math.random()*52);
    var imageElement=document.createElement('img');
    imageElement.src=`static/images/cards/card (${blackjackRandom}).png`;
    imageElement.style='height:200px';
    imageElement.id='image__id';
    for(i=0;i<3;i++){
        var image=document.getElementsByClassName(${value}__image)[0];
        image.appendChild(imageElement);
        }

for(i=0;i<3;i++){
var blackjackRandom=Math.floor(Math.random()*52);
var imageElement=document.createElement('img');
imageElement.src=`static/images/cards/card (${blackjackRandom}).png`;
imageElement.style='height:200px';
imageElement.id='image__id';
document.getElementsByClassName(${value}__image)[0].appendChild(imageElement);
}

With the 1st statement, I am able to append only 1 element into HTML file. But in 2nd statement, I am able to append 3 elements at once into HTML file. According to me it should give the same result. Even in console, it shows the 3 elements either using 1st or 2nd statement. Can someone explain me why is that happening?????????