JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn-1">Button open modal 1</button>
<button class="btn-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() {

    const modal1 = document.querySelector('.modal--1');
    const modal2 = document.querySelector('.modal--2');
    const btn1 = document.querySelector('.btn-1');
    const btn2 = document.querySelector('.btn-2');
    const close1 = document.querySelector('.modal__close--1');
    const close2 = document.querySelector('.modal__close--2');

    function openModal1() {
        modal1.classList.add('modal--open');
    }

    function openModal2() {
        modal2.classList.add('modal--open');
    }

    function closeModal1() {
        modal1.classList.remove('modal--open');
    }

    function closeModal2() {
        modal2.classList.remove('modal--open');
    }


    btn1.addEventListener('click', openModal1);
    btn2.addEventListener('click', openModal2);
    close1.addEventListener('click', closeModal1);
    close2.addEventListener('click', closeModal2);

})();