JSFiddle - React, Tailwind, and code Playground

HTML

<div class="firstDiv">
  <div class="onebox gallery hide"></div>
  <div class="openBoxone"><button>Open</button></div>
</div>
<div class="secondDiv">
  <div class="twobox gallery hide"></div>
  <div class="openBoxtwo"><button>Open</button></div>
</div>
<div class="thirdDiv">
  <div class="threebox gallery hide"></div>
  <div class="openBoxthree"><button>Open</button></div>
</div>

<div class="closeButton">
    <div>
      <button>Close</button>
    </div>
</div>

CSS

.hide{display:none;}
  .onebox{width:100px;height:100px;border:1px solid red;}
  .twobox{width:100px;height:100px;border:1px solid green;}
  .threebox{width:100px;height:100px;border:1px solid blue;}
 .firstDiv,.secondDiv,.thirdDiv{display:inline-block;width:250px;} 
 .closeButton{text-align:center;padding:20px;}

JavaScript

$(".openBoxone button").on("click",function(){
	$(".onebox").removeClass("hide");
});
$(".openBoxtwo button").on("click",function(){
	$(".twobox").removeClass("hide");
});
$(".openBoxthree button").on("click",function(){
	$(".threebox").removeClass("hide");
});

$(".closeButton button").on("click",function(){
	$(".gallery").addClass("hide");
});