Remove display:hidden from an image on click

Remove display:hidden from an image on click

I am populating a div with images from an array that is inside a div with a black background:

var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "6.jpg", "7.jpg", "8.jpg"];


$(document).ready(function () {


    for (var i = 0; i < masks.length; i++) {
        $(".deck").append('<div  onclick="display()" class="card"> <img class="card" src="./' + masks[i] + '"/></div>');

    }

});

the img tag has a css code added to it display:none so that it is hidden, I am trying to make each black square show its image when clicked on but it dosen't work:

function display() {
    $("img").removeAttr("display");
}

How can I achieve that? I also need to keep a card open with the image on until another one is clicked on. Will I achieve better results if I use toggle?