Добрый день, подскажите пожалуйста данную проблему!
У меня на страинце идет отрисовка данных из БД по дивам, тобишь есть 10 строк данных (divов) которые отображают с помощью цикла инфу из БД. Также есть кнопка в каждом dive, это кнопка вызывает модальное окно, то есть также как и div модальных окон в итоге 10, и каждое модальное содержит некоторую инфу также из БД. Инфа в дивы рендерится замечатльно, то есть взял из бд 10 строк данных и они подтянулись циклом каждое в свой див, но вот когда вызываю модальное окно, там почему та инфа всегда одна, а именно из верхнего дива, а должна быть в каждом модальном окне своя инфа как и в каждом диве. Открываю f12 захожу в эти дивы и раскрываю DOM, и вижу что в каждом модальном окне инфа своя, то есть циклом все таки норм прошлось и везде свои данные присвоились, но при фактическом вызове модальных окон повторюсь везде одна и таже инфа О_о
Что с этим поделать? Мысли есть но сути не пойму до конца как убрать данную ошибку в коде, получается так что какую кнопку не нажми то инфа везде одна и таже, тобишь кнопка воспринимается как одна и таже в каждом Диве, добавил кнопкам id который берется рендерингом, все норм, все присваивается рандомно.
Вот упрощенный код
<% for(var i = 0; i < result.length; i++) {%> <-----------цикл для рендеринга ejs
<div class="profile"> <----------------- выводится циклом на каждую страницу по 10
<div class="details">
<h3 class="username"><%=result[i].dataValues.username%></h3>
</div>
<div class="btn">
<span>
<button class="button" id="<%=result[i].dataValues.username%>" onclick="show('block')">View Usernames</button> <------------ кнопка вызова модального окна
</span>
</div>
//////Модальное окно\\\\\\
<div id="modal-filter" onclick="show('none')"></div>
<div id="modal-window">
<div id="view-usernames">
<h3 id="view">View Usernames <%=result[i].dataValues.username%></h3> <------ вот эта инфа не рендерится правильно а всегда одна и та же, на кнопку какого дива не нажать
<hr>
</div>
<div id="get-usernames">
<div class="get" id="get">
<span class="us-name">Username</span>
<input type="text" value="<%=result[i].dataValues.username%>" class="input-usernames" id="input">
</div>
</div>
////Закрытие модального окна\\\\\
<div class="close">
<button id="modal-close" onclick="show('none')">Close</button>
</div>
</div>
</div>
<%}%>
вот как вызывается модальное окно
<script>
var show = function(state){
document.getElementById('modal-window').style.display = state;
document.getElementById('modal-filter').style.display = state;
}
</script>