JSFiddle - React, Tailwind, and code Playground

HTML

<a class="onclick" data-open="contactdiv1">باز کردن پنجره اول</a>
<a class="onclick" data-open="contactdiv2">باز کردن پنجره دوم</a>
<a class="onclick" data-open="contactdiv3">باز کردن پنجره سوم</a>
<a class="onclick" data-open="contactdiv4">باز کردن پنجره چهارم</a>
<div class="contactdiv" id="contactdiv1">
<span class="cancel">&times;</span>
<div id="contact">
پنجره اول 
</div>
</div>
<div class="contactdiv" id="contactdiv2">
<span class="cancel">&times;</span>
<div id="contact">
پنجره دوم 
</div>
</div>
<div class="contactdiv" id="contactdiv3">
<span class="cancel">&times;</span>
<div id="contact">
پنجره سوم 
</div>
</div>
<div class="contactdiv" id="contactdiv4">
<span class="cancel">&times;</span>
<div id="contact">
پنجره چهارم 
</div>
</div>

CSS

.contactdiv {
	display:none;
	padding:10px;
	background-color:#eee;
	border-radius:6px;
	position:fixed;
	width:250px;
	height:150px;
	left:100px;
	top:50px;
	box-shadow:-10px 15px 5px 1px rgba(0, 0, 0, .4);
	border:1px #aaa solid;
}
.contactdiv .cancel {
	float:left;
}
#contactdiv2 {
	left:200px;
	top:45px;
}
#contactdiv3 {
	left:250px;
	top:40px;
}
#contactdiv4 {
	left:300px;
	top:35px;
}
.contactdiv div {
	display:block;
	padding:25px;
	margin:10px;
	clear:both;
	font-size:18px;
	font-weight:bold;
}
.onclick {
	display:inline-block;
	padding:5px;
	margin:5px;
	border:1px #ccc outset;
	border-radius:5px;
	background-color:#ccc;
	cursor:pointer
}
.onclick:hover {
	background-color:#eee;
}
.onclick:active {
	border-style:inset;
}

JavaScript

$(document).ready(function() {
$(".onclick").click(function() {
var id = $(this).attr("data-open");
var id = "#"+id;
$(id).css("display", "block");
});
$(".contactdiv .cancel").click(function() {
$(this).parent().hide();
});
});