Как определить, какой модальный открыть из нескольких модальных?

Question

Я делаю веб-страницу с большим количеством ссылок. Я хочу открыть модальный при нажатии на одну ссылку, чтобы показать больше данных об этой ссылке. Я добился этого с помощью одной ссылки, но теперь, когда у меня вставлено больше ссылок, он не будет открывать другие моды, но всегда один и тот же, если я делаю это с классом, если я оставляю id (да, я знаю, я не думал заранее и сделал это с id) он откроет только первый, остальные даже не откроются.

Вот мой HTML-код:

<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/1.jpg">
    <a id="myBtn"></a>
    <div id="myModal" class="modal1">
        <!-- Modal content -->
        <div class="modal1-content">
            <span class="close1">&times;</span>
            <h2>REFERENCE NAME</h2>
            <div class="post1-container">
                <div class="post1-content">
                    <p>nekitext</p>
                    <h3>Neki header</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/1.jpg">
    <a id="myBtn"></a>
    <div id="myModal" class="modal1">
        <!-- Modal content -->
        <div class="modal1-content">
            <span class="close1">&times;</span>
            <h2>REFERENCE NAME</h2>
            <div class="post1-container">
                <div class="post1-content">
                    <p>nekitext</p>
                    <h3>Neki header</h3>
                </div>
            </div>
        </div>
    </div>
</div>

а вот мой JS:

var modal = document.getElementById('myModal');


// Get the button that opens the modal

var btn = document.getElementById("myBtn");
console.log(btn);

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Я пытался использовать событие onclick, чтобы определить, какой тег myBtn, но в этом случае он работает только для одного модального. Другие не открываются и не работают.

PS: у меня закреплены модалы на изображении.

EDIT:

Я знаю, что у меня несколько идентификаторов, и эти идентификаторы уникальны в HTML. Я не планировал это заранее, так как думал, что у меня будет только один предмет, а теперь у меня несколько, и система рухнула. Должен быть лучший способ сделать это, чем дать каждому элементу свой идентификатор, верно?

EDIT2:

Я НЕ ХОЧУ ИСПОЛЬЗОВАТЬ ID. Вопрос в том, как определить, какой модальный тип открыть в javascript. Если я сделаю это с классами, откроется только один модальный, который всегда имеет одинаковое содержимое.

Answer 1

Вы захотите дать каждой кнопке общее имя класса, т. Е .:

<a class="myButton"></a> // For the buttons

А затем переберите их (и закрывающий диапазон) и добавьте прослушиватель событий для каждого из них, т. Е .:

const buttons = document.querySelectorAll(".myButton");
const spans = document.querySelectorAll(".close1");

for(let i=0; i< buttons.length; i++) {
    buttons[i].addEventListener("click", openModal);
}

for(let i=0; i< spans.length; i++) {
    spans[i].addEventListener("click", closeModal);
}

function openModal(e) {
    e.preventDefault();
    const currentModal = e.currentTarget.parentNode.getElementsByClassName("modal1")[0];
    currentModal.style.display = "block";
}

function closeModal(e) {
    const currentModal = e.currentTarget.closest(".modal1");
    currentModal.style.display = "none";
}

Это найдет ближайший модал к нажатой кнопке и переключит ее вместо жестко заданной ссылки на модальный идентификатор.

РЕДАКТИРОВАТЬ - Посмотреть в действии

Надеюсь, это поможет!