Ребята нужна помощь, есть на странице кнопки(рис) при клике на них появляется popup.
<button id="popup-loot01" class="loot-btn">Book Now</button>
<div class="popup_loot"></div>
<button id="popup-loot02" class="loot-btn">Book Now</button>
<div class="popup_loot loot2">
<button id="popup-loot03" class="loot-btn">Book Now</button>
<div class="popup_loot loot3">
js:
(function openPopUp() {
var btnPopup = document.querySelectorAll('.loot-btn');
var closePopup = document.querySelectorAll('.popup-close');
Array.prototype.forEach.call(btnPopup, function(e){
e.onclick = function(ev){
ev.preventDefault();
this.nextElementSibling.classList.toggle('show');
}
})
Array.prototype.forEach.call(closePopup, function(e){
e.onclick = function(ev){
ev.preventDefault();
this.parentElement.classList.remove('show');
}
})
})();
При клике на кнопку появляется popup, но при клике на другую кнопку появляется новый popup, а предыдущий popup не скрывается. Подскажите пожалуйста как это можно реализовать?