JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn-1 btn-toggle" data-modal="modal--1">Button open modal 1</button>
<button class="btn-2 btn-toggle" data-modal="modal--2">Button open modal 2</button>

<div class="modal modal--1">
    modal 1
    <button class="modal__close modal__close--1">close</button>
</div>
<div class="modal modal--2">
    modal 2
    <button class="modal__close modal__close--2">close</button>
</div>

CSS

* {
    box-sizing: border-box;
}

.modal {
    display: none;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
}

.modal--open {
    display: block;
}

JavaScript

(function() {

		document.body.addEventListener('click', e => {
    	if(e.target.matches('.btn-toggle')) {
      	const modal = e.target.dataset.modal
        document.querySelector('.' + modal).classList.add('modal--open')
      }
      
      if(e.target.matches('.modal__close')) {
      	e.target.closest('.modal').classList.remove('modal--open');
      }
    })
    
})();