JSFiddle - React, Tailwind, and code Playground

HTML

<div class="opener1">Opener1</div>
<div class="opener2">Opener2</div>
<div class="popup1">Popup1</div>
<div class="popup2">Popup2</div

CSS

div {
  margin: 10px;
  width:100px;
  float:left;
}

.opener1 {
  background: green;
}

.opener2 {
  background: yellow;
}

.popup1 {
  background: brown;
}

.popup2 {
  background: blue;
}

JavaScript

$(document).ready(function() {
  console.clear();
  console.log('init');
  InitPopupOpener({opener: ['opener1','opener2'], popup: ['popup1','popup2']});
});

function InitPopupOpener(options) {
	if (options.opener.length == options.popup.length) {
		for (var i = 0; i < options.opener.length; i++) {
			var opener = '.' + options.opener[i];
			var popup = '.' + options.popup[i];
			console.log(opener);
			$(opener).click(function (event) {
			    $(popup).toggle();
			});

			$(document).click(function (event) {
			    if ($(event.target).closest(popup).length == 0 && $(event.target).attr('class') != opener.substr(1)) {
			        $(popup).hide();
			    }
			});
		}
	}
}