Dodawanie stylu, do elementu , który został dynamicznie utworzony w JS.

Question

Witam ;), 

jestem w czasie tworzenia gry. Obecnie jestem na etapie, gdzie chciałabym dodać zieloną ramkę, gdy obrazki są te same, czerwone gdy obrazki są różne. 

Mój dotychczasowy kod:

const game = document.getElementById('game');
let borderColors = document.getElementsByTagName('img');

let firstCard = null; 
let secondCard = null;

const config = {
    height: '100px',
    width: '100px',
    src: 'pictures/back-card.jpg',
    position: 'absolute',
    cardsize: 100,
    cardspacing: 10,
    columns: 4,
    rows: 3,
    time: 1000,
    greenBorder: '2px solid green',
    redBorder: '2px solid red'
}

function createGrid() {
    const cardsIndexes = [] 
    for (let i = 0; i < config.columns * config.rows / 2; i++) { 
        cardsIndexes.push(i);
        cardsIndexes.push(i);    
    }

    const shuffleCards = [];
    while (cardsIndexes.length > 0) {
        let random = Math.floor(Math.random() * cardsIndexes.length) 
        shuffleCards.push(cardsIndexes[random]); 
        cardsIndexes.splice(random, 1); 
    }

    for (let left = 0; left < config.rows; left++) { 
        for (let top = 0; top < config.columns; top++) { 
            renderCard(shuffleCards.pop(), left, top);
        }
    }
}

function renderCard(cardNum, top, left) {
    let card = document.createElement('img');   
    card.num = cardNum;
    card.src = config.src;
    card.style.position = config.position;
    card.style.top = (top * (config.cardsize + config.cardspacing) + config.cardspacing) + 'px';
    card.style.left = (left * (config.cardsize + config.cardspacing) + config.cardspacing) + 'px';
    card.style.height = config.height;
    card.style.width = config.width;
    card.onclick = turnCard;
    game.appendChild(card); 
}

function turnCard(e) {
    let card = e.target;
    if (firstCard === null) {
        firstCard = card;
        card.src = 'pictures/card' + card.num + '.jpg' 
    } else if (secondCard === null) {
        secondCard = card;
        card.src = 'pictures/card' + card.num + '.jpg'        
        setTimeout(checkCards, config.time)     }
}

function checkCards() {
    if (firstCard.num === secondCard.num) { 
        borderColors.style.border = '2px solid green';        
    } else {
        borderColors.style.border = config.redBorder;       
        firstCard.src = config.src;
        secondCard.src = config.src;
    }
    firstCard = null;
    secondCard = null; 
}

 

W funkcji checkCards(), chciałam dodać zielony 'border', gdy 'firstCard.num === secondCard.num'

następnie czerwony 'border', gdy firstCard.num jest różne od  secondCard.num.

Gdy zastosuje się do tego, otrzymuje błąd o treści: 'Uncaught TypeError: Cannot set property 'border' of undefined
    at checkCards'

Uważam, że problem leży w let borderColors, który po console.log zwraca HTMLCollection [], zamiast pojedyńczy img. Jak mogę się 'dostać' do konretnych naciśniętych kart(img)?

Będę wdzięczna za pomoc.