JSFiddle - React, Tailwind, and code Playground

HTML

<div class="exist_photo">
		<div class="exist_photo_caption">Имеющиеся файлы:</div>
					<div class="exist_photo_item">
							<img src="images/photos/1.jpg" alt="">
					</div>
					<div class="exist_photo_item">
							<img src="images/photos/1.jpg" alt="">
					</div>
					<div class="exist_photo_item">
							<img src="images/photos/1.jpg" alt="">
					</div>
</div>

CSS

.exist_photo{
	width: 100%;
	margin: 20px 0;
}
.exist_photo_caption{
	height: 45px;
	line-height: 45px;
}
.exist_photo_item{
	position: relative;
	float: left;
	margin-right: 7px;
	margin-bottom: 7px;
	cursor: pointer;
  width: 100px;
  height: 100px;
  border: 1px solid grey;
}
.exist_photo_item img{display: block;}
.checked:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255, 0, 0, 0.4)/* url(images/photos/delete.png) no-repeat center center*/;
	transition: all 0.5s;
}
.hiddenWrapp{
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	top: 0;
	left: 0;
}

JavaScript

$('.exist_photo_item').each(function(){
		var wrapphideInput = $('<div class="hiddenWrapp"></div>');
    var a = $('<div class="hiddenWrapp"><input type="hidden" /></div>');
		var hideInput = $('<input type="hidden" />').appendTo(wrapphideInput);
				$(this).on('click', function() {
				$(this).toggleClass('checked');
				$(wrapphideInput).appendTo('.checked');
			});
			$(wrapphideInput).on('click', function() {
					$(this).removeClass('checked');
          $('.hiddenWrapp').remove();
			});
});