So i have asked a sort of a similar question, but that didnt work out since it seemed that it is a copy and the solution is out there already.

The code is the following

<script>     
var res = localStorage.getItem('img');
        if(res == null){
                const myList = ['🐒', '🐕', '🐈', '🐅', '🐎', '🦓', '🐄', '🦒', '🐘', '🦔', '🦉', '🐊', '🦖', '🐬', '🦈', '🦋', '🐞', '🦂'];
                res  = myList[Math.floor(Math.random() * myList.length)];
                localStorage.setItem('img', res);
            }
    console.log(res);
    
    document.getElementsByClassName("emoji").innerHTML = res
</script> 

<span class="emoji" style="font-size: 40px !important;"></span>
<span class="emoji" style="font-size: 40px !important;"></span>

Possible solution that was given was

document.getElementsByClassName("emoji")[0].innerHTML = res;

However, that had no effect at all, only showed a generated emoji at the first div with the class "emoji", but nothing at the other once.

I have looked though the similar question that was asked before, however for me it seems like there is no clear similarity and hence my question is still bothering me, since I dont understand why it doesn't work. I have a function for same classes, not a css formatting

Maybe some ideas or better solutions that could be viable?

*There is already Elements not element and i have tried divs with same id, but as i suppose it should work - only the first div shows the emoji