Как мне исправить эти изображения в формате строки в этом конкретном div

Question

Это мой Javascript файл. Я сначала создал этот тег изображения и добавил его в этот конкретный div:

let blackjackGame={
'you':{'scoreSpan':'#your-blackjack-result','div':'#your-box','score':0},
'dealer':{'scoreSpan':'#dealer-blackjack-result','div':'#dealer-box','score':0},
};
   const YOU=blackjackGame['you']  
   const DEALER=blackjackGame['dealer']

const hitSound=new Audio('static/sounds/swish.m4a');

document.getElementById('blackjack-hit-button').addEventListener('click',blackjackHit);
function blackjackHit(){
    let cardImage=document.createElement('img');
    cardImage.src='static/images/2.png';
   document.querySelector(YOU['div']).appendChild(cardImage);
   hitSound.play();    
}

this мое тело row1 индекса. html означает, что он содержит вашу коробку и коробку дилера:

   <div class="flex-blackjack-row1">
        <div id="your-box">
            <h2>You :<span id="your-blackjack-result">0</span></h2>
        </div>
        <div id="dealer-box">
            <h2>Dealer :<span id="dealer-blackjack-result">0</span></h2>
        </div>
   </div>