How can I call this card selection loop again?

I'm working on a javascript card game. In the game the player can play a pair of cards together but only if their suits match. Currently I have this loop Selected.selectionLoop():

export function selectionLoop() {

    let selectedCard = elements.selectedCard;

    for (var i = 0; i < selectedCard.length; i++) {
    //add event listener to each card 
        selectedCard[i].addEventListener("click", function() {

      //test for the class selected
            if (this.classList.contains("selected")) {

                this.classList.remove("selected");
                selectedCardsImg.shift(this.classList);

            } else if (!this.classList.contains("selected") && selectedCardsImg.length < 2) {
                this.classList.add("selected");
                selectedCardsImg.push(this.classList);
               
            
            }
        })
    }
}

Which adds the class "selected" to the clicked on cards, up to 2 cards at a time and pushes the corresponding card object into the selectedCards array.

I then have this UIC.renderCardInSlot() loop to render the selected cards in the field of play:

export function renderCardInSlot () {

        for (var i = 0; i < elements.cardSlotDisplay.length; i++) {
    
            let cardSlotDisplay = elements.cardSlotDisplay[i];
            //add an event listner (click)
            cardSlotDisplay.addEventListener('click', function () {
                //on click call these functions
                Selection.pushSelected();

                if (selectedCards[0].suit === selectedCards[1].suit) {

                Selection.removeFromHand();
                removeFromHandDisplay();
                
                    let card1 = selectedCards[0].cardName;
                //if the number of cards selected is one 
                if (selectedCards.length === 1) {
                    //render this card in the slot
                    cardSlotDisplay.insertAdjacentHTML('beforeend', 
                `<div class="showcard ${card1} undercard"></div>
                `);
                    console.log(`one card`);
                    
                } else {
        
                    let card2 = selectedCards[1].cardName;
                    
                    cardSlotDisplay.insertAdjacentHTML('beforeend', 
                `<div class="showcard ${card1} undercard"></div>
                <div class="showcard ${card2} overcard"></div>
                `);
                    console.log(`2 cards`);
                }
            } else {
                console.log(`not the same suit`);
                Selection.emptySelected();
                resetSelection();
                
            }
            
        
                
        })
        }

}

If the suits don't match, then the selectedCards array is emptied and the "selected" classes are removed.

The problem I have is that after a player has a selection rejected, they can't select any cards. How do i correct this?

The relevant HTML:

           <div id="field-of-play">
                <div id="opponent-defense">
                    <div class="card-slot1 card-slot"></div>
                    <div class="card-slot2 card-slot"></div>
                    <div class="card-slot3 card-slot"></div>
                    <div class="card-slot4 card-slot"></div>
                    <div class="card-slot5 card-slot"></div>
                </div>
                <div id="player-offence">
                    <div class="card-slot1 card-slot"></div>
                    <div class="card-slot2 card-slot"></div>
                    <div class="card-slot3 card-slot"></div>
                    <div class="card-slot4 card-slot"></div>
                    <div class="card-slot5 card-slot"></div>
                </div>

                </div>
            </div>
            <div id="player-hand">
            </div>

The cards are as such

  <div class="card two_clubs"></div>
  <div class="card three_clubs"></div>

Rendering as

<div class="card two_clubs undercard"></div>
  <div class="card three_clubs overcard"></div>