JSFiddle - React, Tailwind, and code Playground

by Hernani Mattos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure class="catImag">
<img src="" alt="">
	
</figure>
<figure class="catImag">
<img src="" alt="">
	
</figure>
<figure class="catImag">
<img src="" alt="">
	
</figure>

JavaScript

$(document).ready(function() {

var imageObject = [ 
		{
			src: 'cat01.jpg',
			alt: 'Cat 01',
			count: 0,
		},
		{
			src: 'cat02.jpg',
			alt: 'Cat 02',
			count: 0,
		},
		{
			src: 'cat03.jpg',
			alt: 'Cat 03',
			count: 0,
		},
	];


$('.catImag img').each(function(i, el) {

 $(this).attr(
	 {
			'src': imageObject[i].src,
			'alt': imageObject[i].alt,
			'data-count': imageObject[i].count
		}
 );

$(this).after('<figcaption>' + imageObject[i].alt + '</figcaption>');
$(this).after('<span></span>');

})


$('.catImag ').click(function(){


	var countIni = $(this).children('img').attr('data-count');

	$(this).children('span').text(countIni = parseInt(countIni, 10) + 1);
	$(this).children('img').attr('data-count',countIni)


	console.log($(this).children('span'));

	})

});