Сделайте два одинаковых изображения с помощью jquerry

---

Я пытаюсь сделать игру на javascript. Когда страница загружается, плитки отображаются с их задним изображением, и когда вы нажимаете на них, они показывают свою заднюю сторону, которая является другим изображением. Я хочу сделать так, чтобы при открытии двух одинаковых изображений они исчезали с экрана, а если они не совпадают, то плитки должны снова перевернуться на свое заднее изображение.

Вот мой html код

<div class="container">
        <header>

            <h1> Memory Game
         </h1>
        </header>

        <ul class="deck" id="card-deck">
            <li></li>
        </ul>

    </div>

а вот и мой JavaScript:

//Storing the mask images


var masks = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg", "/images/4.jpg", "/images/12.jpg", "/images/6.jpg", "/images/1.jpg", "/images/2.jpg", "/images/3.jpg", "/images/4.jpg", "/images/12.jpg", "/images/6.jpg", ];

// Shuffling the array using the Fisher Yates
function shuffleMasks(masks) {
    for (var i = masks.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = masks[i];
        masks[i] = masks[j];
        masks[j] = temp;
    }
}




// Show modal when page loads and close me piece
function showModal() {
    modal.style.display = "block";
    $('#closeMe').hide().delay(10000).show('fast')
}

// Close modal after the X has been clicked
function closeModal() {
    modal.style.display = "none";
}



// JQuerry goes here

$(document).ready(function () {
    window.modal = document.getElementById('myModal');
    shuffleMasks(masks);
    console.log(masks)
        //    showModal();
    for (var i = 0; i < masks.length; i++) {
        $(".deck").append('<div class="card"> <img class="card" src="' + masks[i] + '"/></div>');

    }
    $(".deck").on('click', '.card', function () {
        var cardVisible = $('.card img:visible').length; //Get the number of visible img

        if (cardVisible >= 2) $('.card img').hide(); //If 2 or more, hide all
        var open = $('img').attr('id', 'open');

        $(this).find("img").show() //Show the image


// Matching the cards
        
        $(".card").on('click', function () {
            var source = $(this).find("img").attr('src')
            alert(source);
            if (source === source) {
                $('.card img').hide();
            }



        })

    })

});

Моя последняя функция хранит изображение src, и я предупреждаю, чтобы убедиться, что оно работает, но оно предупреждает не один раз после щелчка, а скорее пару раз. Также мое сравнение не работает, как правильно сопоставлять одни и те же изображения?

Заранее спасибо

Что я уже пробовал:

Я попытался получить изображение src и сравнить его, я попытался сохранить изображения в новом массиве и зациклиться с моим if condiiton, но это тоже не сработало.

---