JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="teststyle.css">
</head>
<body>
	<button id="myBtn">Open modal</button>
		<div id="myModal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p> modal hui</p>
			</div>
		</div>
		<script src="script.js"></script>

		<button id="raz">Open modal</button>
		<div id="two" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<p> modal</p>
			</div>
		</div>
		<script src="script1.js"></script>
</body>
</html>

CSS

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
}
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

JavaScript

var modalz = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var spa = document.getElementsByClassName("close")[0];

btn.onclick = function() {
	modalz.style.display = "block";
}
spa.onclick = function() {
	modalz.style.display = "none";
}

window.onclick = function (event) {
	if (event.target == modalz) {
		modalz.style.display = "none";
	}
}

var two = document.getElementById('two');
var raz = document.getElementById("raz");
var spaned = document.getElementsByClassName("closes")[0];

raz.onclick = function() {
	two.style.display = "block";
}
spaned.onclick = function() {
	two.style.display = "none";
}

window.addEventListener ('click', function (event) {
if (event.target == two) {
two.style.display = "none"; } 
})