JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tdone">1</div>
<div id="modalone">Modal 1</div>
<div id="tdtwo">2</div>
<div id="modaltwo">Modal 2</div>

CSS

div {
  width: 100px;
  height: 100px;
  background: dodgerblue;
  margin: 5px;
}

#modalone {
  display: none;
}

#modaltwo {
  display: none;
}

JavaScript

let tdone = document.getElementById('tdone'),
    modalone = document.getElementById('modalone'),
    tdtwo = document.getElementById('tdtwo'),
    modaltwo = document.getElementById('modaltwo');

tdone.onclick = function(){
  modalone.style.display= "block";
};
tdtwo.onclick = function(){
  modaltwo.style.display= "block";
};
window.onclick = function (e){
  if(e.target == modalone) {
    modalone.style.display="none";
  } else if (e.target == modaltwo) {
   modaltwo.style.display="none";
  }
};