JSFiddle - React, Tailwind, and code Playground

HTML

<span class="btn btn-open">btn</span>
  <ul class="modal">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
  </ul>
<p></p>
<span class="btn btn-open">btn</span>
  <ul class="modal">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
  </ul>

CSS

html, body {
  height: 100%;
}
.btn {
  border: 1px solid red;
  padding: 5px 10px;
}
.btn-open {
  background: #f00;
  cursor: pointer;
}
.modal {
  display: none;
  background: rgba(0,0,0,0.7);
  width: 300px;

}
.hide {
  //display: none;
}

JavaScript

$(function() {
    $(document).on("click", function(event) {
        var elem = $(event.target),
            btn = $(".btn"),
            popup = $(".modal");
        if (elem.is(".btn")) {
            event.stopPropagation();
            var indx = btn.index(elem);
            elem.toggleClass("btn-open btn-close");
            popup.eq(indx).slideToggle()
        } else if (elem.closest(popup).length) return;
        else if (btn.is(".btn-close")) {
            popup.slideUp();
            btn.filter(".btn-close").toggleClass("btn-open btn-close")
        }
    })
});