I am working on a blackjack game for a game. When I want to add a card it needs to be given the correct rotation and offset. This works, only if I load them at t start. Not when I want to add a card. So when I call the function AddCard() it should add a card to the container with the correct rotation and offset.
HTML:

<div class="urp-blackjack-playercards">
 <div class="urp-blackjack-playercard-items">      
 </div>
</div>

JQ:

let cards = document.querySelector('.urp-blackjack-playercard-items');
let w = cards.offsetWidth;
let totalarc = 40;
let numcards = $('.urp-blackjack-playercard-item').length;
console.log(numcards)

function AddCard() { 
    $( ".urp-blackjack-playercard-items" ).append(`<div class="urp-blackjack-playercard-item">
<img src="./assets/cards/CLUB_06.png" alt=""></div>
               </div>`);
    UpdateCards()
    numcards = numcards + 1

}

function UpdateCards() {
    
    console.log(numcards)
    let angles = Array(numcards).fill('').map((a, i) => (totalarc / numcards * (i + 1)) - (totalarc/2 + (totalarc / numcards) / 2));
    let margins = angles.map((a, i) => w / numcards * (i + 1));

    angles.forEach((a, i) => {
    let s = `transform:rotate(${angles[i]}deg);margin-left:${margins[i]}px;`
    let c = `<div class='urp-blackjack-playercard-item hidden' style='${s}'></div>`;
    cards.innerHTML += c;
    })
}



UpdateCards()

I am working on a blackjack game for a game. When I want to add a card it needs to be given the correct rotation and offset. This works, only if I load them at t start. Not when I want to add a card. So when I call the function AddCard() it should add a card to the container with the correct rotation and offset.