i wan to display img element created by javascript in two separate divs but it keeps showing only one

I am trying to create a rock paper scissors game and I want to display each player hand using images in two separated divs but when the random number be the same it shows only 1 image this is my html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
<div id="container">
    <button id="start-btn">enter-name</button>
    <div id="players">
        <div id="player"></div>
        <div id="robot"></div>

    <script src="javascript/app.js"></script>

this is my javascript

    const startBtn = document.getElementById('start-btn');
const players = document.getElementById('players');
const player = document.getElementById('player');
const robot = document.getElementById('robot'); 
* hands
const rockCard = document.createElement('img');
const paperCard = document.createElement('img');
const scissorCard = document.createElement('img');
rockCard.src = "img/rocks.png";
paperCard.src = "img/paper-boat.png";
scissorCard.src = "img/scissors.png";
rockCard.style.width = "100px"
scissorCard.style.width = "100px"
paperCard.style.width = "100px"
let handsArray = [rockCard, paperCard, scissorCard];

* function to create random number
function playerHand(){
    random = Math.floor(Math.random() * 3);
function robotHand(){
    random = Math.floor(Math.random() * 3);


that is because same created element can only be appended once in a document. You can use node.cloneNode(true) to achieve that


Let me know if this solve your issue 😉