How to dynamically get data from the database and pull it into modal windows?

Question

JavaScript

Good afternoon, please tell me this problem!
On my page, data is being drawn from the database by divs, so there are 10 lines of data (divs) that display information from the database using a cycle. There is also a button in each dive, this button calls a modal window, that is, just like the div of modal windows, in total 10, and each modal contains some information from the database as well. Infa in divs is rendered remarkably, that is, I took 10 rows of data from the database and they were pulled up by a cycle each into its own div, but when I call the modal window, there is why that infa is always the same, namely from the top div, but should be in each modal window its own infa as in every diva. I open f12, I go into these divs and open the DOM, and I see that each modal window has its own infa, that is, the cycle still went through the norms and assigned its data everywhere, but when the modal windows are actually called, I repeat everywhere the same infa O_o
What to do about it? I have thoughts, but I don’t fully understand the essence of how to remove this error in the code, it turns out that which button you don’t press, then the info is the same everywhere, tobish the button is perceived as the same in each Diva, I added an id to the buttons that is taken by rendering, everything is fine, everything is assigned randomly.
Here is the simplified code

<% 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>
   <%}%>

this is how the modal window is called

<script>
      var show = function(state){
        document.getElementById('modal-window').style.display = state;
        document.getElementById('modal-filter').style.display = state;

      }
  </script>

Answer 1

So, where did you link buttons to modal windows?

Answer 2

The ordeals helped, I hung the handler on the button (there are not one of them on the site, there are different buttons, but it doesn’t matter since the rendering goes to the modal window and it opens with only one button). Next, we assign the id variable from the id attribute (id goes with the help of ejs in html) and write the result to the right place in this case, in a div with id view, and it is always the one that is needed, since different buttons got their unique id
$ (document) .ready(function(){
$("button").on("click", function(){
var id = $(this).attr("id");
//alert(id);
$("# view").html(id);
})
});
Thanks to everyone who helped