jstl <c:foreach>문에서 modal 사용 시, list의 첫번째 값만 받아오는 문제 해결

<c:forEach items="${receiptMsgList }" var="row"> <div onclick="document.getElementById('modalId').style.display='block'"> 이름 : ${row.name} / 나이 : ${row.age} </div> <div id="modalId" class="w3-modal"> 모달 내용 해당 유저 이름은 ${row.name} 입니다. </div> </c:foreach>

라는 코드가 있을 때, 나는 foreach문을 돌면서 해당하는 row값이 모달에도 찍히길 원했다.

하지만 결과는 list의 맨 첫번째 row값만 계속 모달창에 불려진다. 

해결 방법은 모달 id에 일련번호를 붙이는 것이다. 

아래는 해결 코드 (위에서 빨간글씨들만  추가해 주면 됨)

<c:forEach items="${receiptMsgList }" var="row" varStatus="vs"> <div onclick="document.getElementById('modalId${vs.index}').style.display='block'"> 이름 : ${row.name} / 나이 : ${row.age} </div> <div id="modalId${vs.index}" class="w3-modal"> 모달 내용 해당 유저 이름은 ${row.name} 입니다. </div> </c:foreach>