JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    <div class="cd-member-bio member-1">
        <a data-type="gall-1"><div  class="proektimg" id="p1"></div></a>
    </div>
    <div class="cd-member-bio member-2">
        <a data-type="gall-2"><div  class="proektimg" id="p2"></div></a>
    </div>
</div>
    <div class="gallery gall-1"></div>
    <div class="gallery gall-2"></div>

CSS

#p1{
	display:block;
	background:#096;
	width:100px;
	height:100px;
}
#p2{
	display:block;
	background:#ffde59;
	width:100px;
	height:100px;
}
.gallery{
	position:absolute;
	top:30%;
	left:30%;
	width:200px;
	height:200px;
	display:none;
}
.gall-1.slide-in{
	background:#0F0;
	display:block;
}
.gall-2.slide-in{
	background:#ffde59;
	display:block;
}

JavaScript

$('#bg').find('a').on('click', function(event){
    event.preventDefault();
    var selected_gall = $(this).data('type');
    $('.gallery.'+selected_gall).toggleClass('slide-in');
    $('#fonbg').addClass('one');
});