Blackjack game: 1st and 2nd cards are displyed twice when i ask for a new card

I'm newbie and this is my 1st question on stackoverflow. Please help me. When I click on "Start game" button I got two cards (i.e.: Cards: 6 7) and this is Ok. But when I click on "New card" button, the 1st and 2nd card are displayed another time with the 3rd card (i.e. 6 7 6 7 11). Thanks for your help.

let cards = []
let sum = 0; 
let hasBlackJack = false
let isAlive = false;
let message = "";
let messageEl = document.getElementById("message-el");
let cardsEl = document.getElementById("cards-el");
let sumEl = document.getElementById("sum-el");
let player = document.getElementById("player-el");

let players = {
    name : "Moez",
    chips : 195
}
player.innerText = players.name + ": $" + players.chips;

function getRandomCard(){
    let randomCard = Math.floor(Math.random() * 13) + 1;
    if (randomCard === 1) {
        return 11;
    } else if (randomCard > 10) {
        return 10;
    } else {
        return randomCard;
    }
    
}

function startGame() {
    isAlive = true;
    let firstCard = getRandomCard();
    let secondCard = getRandomCard();
     cards = [firstCard, secondCard];
    sum = firstCard + secondCard;

    cardsEl.innerText = "Cards: ";
    for (let i=0; i<cards.length; i++) {
        cardsEl.innerText += " " + cards[i] + " ";
    }

    sumEl.innerText = "Sum: " + sum;
    if (sum <= 20) {
        message = "Do you want to draw a new card?"
    } else if (sum === 21) {
        message = "Wohoo! You've got Blackjack!";
        hasBlackJack = true;
    } else {
        message = "You're out of the game!";
        isAlive = false;
    }
    messageEl.innerText = message;
}

function newCard() {
    
    if (isAlive = true && hasBlackJack === false) {
        let thirdCard = getRandomCard();
        cards.push(thirdCard);
        sum = sum + thirdCard;
        for (let i=0; i<cards.length; i++) {
            cardsEl.innerText += " " + cards[i] + " ";
        }
        sumEl.innerText = "Sum: " + sum;

        if (sum <= 20) {
            message = "Do you want to draw a new card?"
        } else if (sum === 21) {
            message = "Wohoo! You've got Blackjack!";
            hasBlackJack = true;
        } else {
            message = "You're out of the game!";
            isAlive = false;
        }
        messageEl.innerText = message;
    
        
    }
    
}

I want that when I click on "New card" I got only the 3rd card displayed next to the 1st and 2nd card.

The problem you are facing happens because you never reset cardsEl.innerText.

So when you add a new card to your cards array, with the for loop you will render both your new card and the cards that were previously added to the array.

A quick fix would be to reset the innerText by adding this line before the for loop : cardsEl.innerText = "Cards: ";

End result:

function newCard() {
    if (isAlive && !hasBlackJack) {
        let newCard = getRandomCard();
        cards.push(newCard);
        sum += newCard;

        // Reset the displayed cards
        cardsEl.innerText = "Cards: ";

        for (let i = 0; i < cards.length; i++) {
            cardsEl.innerText += " " + cards[i] + " ";
        }
        // same code