Unable to access data inside of the bootstrap modal code block

[cavellerson]

I'm trying to access the post_id that is given from the beginning of the code, when i loop over an array of objects. I am posting post.post_id at every point and even inside the modal. The problem: the post_id shown is correct with the given post UNTIL the post.post_id is inside the modal... it then displays the most recent post's post.post_id instead of the one that is correct... here's my code: is there some reason why a bootstrap modal would change the value of post.post_id? I can't seem to find the mistake I am making...

[this is an illustration of the problem i'm having, the post ids are all good until it hits the modal] https://i.stack.imgur.com/zugIX.png

` <%- include ('./partials/header.ejs') %>

    <h3 class="greeting">Hi <%=username%>, check out what others are posting:) </h3>



    <% for (let post of allPosts) { %>



    <div class="postBox">
        first <%=post.post_id%>

        <div class="postHead">
            <a id="username" href="/<%=post.username%>"><%=post.username%></a>
            second  <%=post.post_id%>
        </div>

        <div class="postBody">
            third  <%=post.post_id%>
            <a href="/posts/<%=post.username%>/<%=post.post_id%>"><img
                id="postImage" src="<%=post.image%>" alt="<%=post.image%>">
            </a>
            <% if (allLikes.includes(post.post_id)) { %>

                <form class=""
                action="/action/unlike/<%=post.username%>/<%=post.post_id%>?"
                method="POST">
                    <button type="submit" name="button"
                    class="unlike-button"><ion-icon name="heart-dislike"></ion-icon></button>
                </form>
            <% } else { %>
                <form class=""
                action="/action/like/<%=post.username%>/<%=post.post_id%>?"
                method="POST">

                    <button type="submit" name="button"><ion-icon class="like-button" name="heart-outline"></ion-icon></button>

                </form>
            <% } %>
        </div>
        <div class="postDescription">
             fourth <%=post.post_id%>
             <!-- Button trigger modal -->
             <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
               post_id: <%=post.post_id%>
             </button>

             <!-- Modal -->
             <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                 <div class="modal-content">
                   <div class="modal-header">
                     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
                     post_id: <%=post.post_id%>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close <%=post.post_id%></button>
                     <button type="button" class="btn btn-primary">Save changes</button>
                   </div>
                 </div>
               </div>
             </div>






            <div class="mainDescription">
                <a id="username" href="/<%=post.username%>"><%=post.username%></a> <%=post.description%>
                <%=post.post_id%>
            </div>

        </div>

        <br>
        <% for (let comment of allComments) { %>
            <% if (comment.post_id === post.post_id) { %>
                <p><a id="username" href="/<%= comment.username%>"><%= comment.username%></a> <%=comment.comment%></p>
            <% } %>
        <% } %>


        <form action="/comments/<%=post.post_id%>" method="POST">
            <input class="commentBox" type="text" name="comment" placeholder="Add a comment...">
        </form>
    </div>
    <% } %>



</body>`

[alpadev]

Ids need to be unique. You reuse id="exampleModal" for every modal and because of this you're likely opening the wrong modal with the button <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">.

[cavellerson]

thank you so much, I managed to fix the problem on my own eventually but i truly appreciate it!