Why isn't this loop working? (Amateur Javascript)

I'm sorry if this is already answered, I've been ripping hair out the last few hours trying to figure it out.

I'm working on my first JavaScript project, a card game. It has a playerHand array which consists of 7 card objects with the properties Value suit and cardName. These are rendered on the screen as 7 divs with the shared class .card and unique classes that match the corresponding cardName e.g. .six_hearts .ace_spades

When a card div is clicked on, it recieves the class .selected. The Div's classList is then pushed into an array entitled SelectedCardsImg.

What I'm trying to do is to remove the corresponding card object from the playerHand array and push it into a new array entitled selectedCards.

    //loop through array of card images
    for (var i = 0; i < ImgArr.length; i++) {

      //loop through playerHand array (card objects)
      for (var x = 0; x < playerHand.length; x++) {

        //if the current card image classlist contains the current card objects name
        if (ImgArr[i].contains(playerHand[x].cardName)) {

          //push it into the new array selectedCards
          selectedCards.push(playerHand[x]);

          //remove it from the playerHand array
          playerHand.shift(playerHand[x]);
      }
    }
  }

Thanks in advance for your help.