How can I make my JavaScript BlackJack game have one function to add up the values of the cards for the player and dealer?

Question

I'm struggling to create my own Blackjack game using JavaScript. I didn't have any images for cards so I followed a YouTube tutorial and downloaded a folder from the user's GitHub page and copied that part of the code but otherwise, I would like to try to create my own version of Blackjack. Each card image in the folder I'm using is titled "A-C.png", "2-C.png" etc. with C, D, H, S being Clover, Diamonds, Hearts and Spades respectively. Here is the HTML code first that I have:

Next, here is the JavaScript code that I've created. I also created a function called getValueDealerCards() which is very similar to the getValuePlayerCards() function, only replacing playerCards.forEach() with dealerCards.forEach(), playerCards with dealerCards as a parameter in the function call and playerHand with dealerHand when adding up the values on the last line.

The code I have is working and displaying the cards that are dealt properly but it's a little too long and I don't like having two separate functions just to add up the values of the player and dealer cards respectively.

I would also like to add code to keep track of who wins each round until there are no cards left in the deck too but for now, I wanted to focus on creating a function to add up the values of the cards for the player and dealer first. I also tried using for loops but using two separate forEach methods in the getValuePlayerCards() and getValueDealerCards() was the only attempt that seemed to be working. I appreciate any suggestions and advice for improving my project.

var hidden; 
var winner; 

var canHit = true; 
var nextTurn = true; 

var playerScore = 0; 
var dealerScore = 0; 

var playerHand = 0; 
var dealerHand = 0; 

let playerCards = []; 
let dealerCards = []; 

let cards = ["A-C", "2-C", "3-C", "4-C", "5-C", "6-C", "7-C", "8-C", "9-C", "10-C", "J-C", 
"Q-C", "K-C", "A-D", "2-D", "3-D", "4-D", "5-D", "6-D", "7-D", "8-D", "9-D", "10-D", "J-D", 
"Q-D", "K-D", "A-H", "2-H", "3-H", "4-H", "5-H", "6-H", "7-H", "8-H", "9-H", "10-H", "J-H", 
"Q-H", "K-H", "A-S", "2-S", "3-S", "4-S", "5-S", "6-S", "7-S", "8-S", "9-S", "10-S", "J-S", "Q-S", "K-S"]; 

startGame(); 

function startGame() {
    shuffleDeck(cards); 
    startTurn(); 
}

function startTurn() {
    dealCardstoDealer(); 
    dealCardstoPlayer(); 
}

function shuffleDeck(deck) {
    for(i = 0; i < deck.length; i++) {
        let j = Math.floor(Math.random() * deck.length); 
        let temp = deck[i]; 
        deck[i] = deck[j]; 
        deck[j] = temp; 
    }
    console.log(deck); 
}

function dealCardstoDealer() {
    let cardImg = document.createElement("img"); 
    hidden = cards.pop(); 
    dealerCards.push(hidden); 
    cardImg.src = "./cards/" + "BACK" + ".png"; 
    document.getElementById("DealerHiddenCards").append(cardImg); 
    getValueDealerCards(card, dealerCards); 
    do {
        let card; 
        let cardImg = document.createElement("img"); 
        card = cards.pop(); 
        dealerCards.push(card); 
        cardImg.src = "./cards/" + card + ".png"; 
        document.getElementById("DealerCardsShow").append(cardImg); 
        getValueDealerCards(cards, dealerCards); 
        } while(dealerHand < 17);
    console.log(`The dealer currently has ${dealerHand}`); 
}

function dealCardstoPlayer() {
    for(let i = 0; i < 2; i++) {
        let cardImg = document.createElement("img"); 
        card = cards.pop(); 
        playerCards.push(card); 
        cardImg.src = "./cards/" + card + ".png"; 
        document.getElementById("PlayerCardsShow").append(cardImg); 
        getValuePlayerCards(card, playerCards); 
    }
    console.log(`The player currently has ${playerHand}`); 
}

function getValuePlayerCards(card, playerCards) {
    let cardValueArray = []; 
    playerCards.forEach(getCardFirstValue);
function getCardFirstValue() { 
    cardValue = card.slice("-"); 
    cardInteger = cardValue[0]; 
    cardValueArray.push(cardInteger); 
    cardValueArray.forEach(checkValue); 
}
function checkValue(cardInteger) {
    if(cardInteger == "A") {
        cardrealValue = 11; 
    } else if(cardInteger == "J"|| cardInteger == "Q"|| cardInteger == "K") {
        cardrealValue = 10; 
    } else {
        cardrealValue = parseInt(cardInteger); 
    }

    playerHand+=cardrealValue; 
}
function getValueDealerCards(card, dealerCards) {
    let cardValueArray = []; 
    playerCards.forEach(getCardFirstValue); 
function getCardFirstValue() {
    cardValue = card.slice("-"); 
    cardInteger = cardValue[0]; 
    cardValueArray.push(cardInteger); 
    cardValueArray.forEach(checkValue); 
}

function checkValue(cardInteger) {
    if(cardInteger == "A") {
        cardrealValue = 11; 
    } else if(cardInteger == "J"|| cardInteger == "Q"|| cardInteger == "K") {
        cardrealValue = 10; 
    } else {
        cardrealValue = parseInt(cardInteger); 
    }

    dealerHand+=cardrealValue; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Black Jack Game</title>
    <link rel="stylesheet" href="MyAttemptBlackJack.css">
</head>
<body>
    <p id="RoundScore">Round Score</p><br>
    <p id="DealerScore">Dealer's Score:</p><br>
    <div id="DealerHiddenCards"></div>
    <div id="DealerCardsShow"></div><br>
    
    <p id="PlayerScore">Player's Score:</p><br>
    <div id="PlayerCardsShow"></div><br>
    <button id="HitButton">Hit</button>
    <button id="StayButton">Stay</button><br>
    <p id="GameResult">Game Result</p>
    <script src="MyAttemptBlackJack.js"></script>
</body>
</html>