Jquery JavaScript Click Counter

I'm applying image attributes and names via Jquery through an array of images and names. The image below illustrates the images of the loaded array.

WhenIclickondisplaythenameoftheimagecontainedinthearray.Belowtheimageillustrateswhathappenswhentheclickeventisperformed,thenamesaredisplayedunderneaththeimages,incaseonlytwoimageshavebeenclicked.

Ihavetocounttheclicksaswell.ButIdonotknowhowtoperformthissameeventinthecodebelow:

Myhtmlcodelookslikethis:

<divclass="col-md-3"> <figure class="catImag"><img src=""></figure> <span class="count"></span> onde vai o contador </div>

And this is my jQuery with click event.

 const catsImages = ['cat01.jpg', 'cat02.jpg', 'cat03.jpg', 'cat04.jpg', 'cat05.jpg'];
    const catsName = ['Cat KiKI', 'Cat Edi', 'Cat Didi', 'Cat Kely', 'Cat Vivi'];

    let image = [...catsImages];
    let name = [...catsName];

    console.log(image);
    console.log(name);

    let count = 0;//Variavel contador

    $.each($('.catImag img'), function(index) {
        $(this).attr({
            src: image[index],
            alt: name[index]
        });
    }); //Update Cat cria os atributos para receber a imagem

    $.each($('figure'), function(index, el) {

        $(this).one('click', function(event) {
            /* Act on the event */
            $(this).append('<figcaption>' + name[index] + '</figcaption>');
        });

    });// update click name, exibe o nome do cat clicado