How to have multiple different Bootstrap Modals in a jsp page using jstl's forEach?

Question

I am trying to change the content in the Bootstrap Modal in my jsp page. But all of modals show the content of the first item. In every row, the first two <td> show different contents but only the content in the modal is same.

Does anyone know what's the problem here?

My code:

<table>
            <c:forEach var="item" items="${itemList}">
                <tr>
                    <td>${item.title}</td>
                    <td>${item.price}</td>
                    <td>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="viewDetailButton">Quick Shop</button>
                      <!-- Modal -->
                      <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                          <!-- Modal content-->
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body">
                              <div class="img">
                                <img height="150" width="150" src="${item.photoName}" />
                              </div>
                              <div class="detail">
                                  <div class="row">
                                  Color: ${item.color}
                                  </div>
                                  <hr>
                                  <div class="row">
                                  Price: ${item.price}
                                  </div>
                                  <div class="row">
                                  Size: ${item.size}
                                  </div>
                                  <%-- <div class="row">
                                  Product Description: ${item.details}
                                  </div> --%>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                              <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                            </div>
                          </div>

                        </div>
                      </div>
                    </td>
                </tr>
            </c:forEach>
        </table>

Answer 1

Every button has the same data-target="#myModal". So its target modal will be the first modal with id="myModal".

You can use varStatus of your forEach loop to generate unique ids for your modals and target them in your buttons:

<table>
        <c:forEach var="item" items="${itemList}" varStatus="vs">
            <tr>
                <td>${item.title}</td>
                <td>${item.price}</td>
                <td>
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal${vs.index}" id="viewDetailButton${vs.index}">Quick Shop</button>
                  <!-- Modal -->
                  <div class="modal fade" id="myModal${vs.index}" role="dialog">
                    <div class="modal-dialog">

                      <!-- Modal content-->
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                          <div class="img">
                            <img height="150" width="150" src="${item.photoName}" />
                          </div>
                          <div class="detail">
                              <div class="row">
                              Color: ${item.color}
                              </div>
                              <hr>
                              <div class="row">
                              Price: ${item.price}
                              </div>
                              <div class="row">
                              Size: ${item.size}
                              </div>
                              <%-- <div class="row">
                              Product Description: ${item.details}
                              </div> --%>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add to bag</a>
                          <a href="#" class="btn btn-default" data-dismiss="modal">Add To WishList</a>
                        </div>
                      </div>

                    </div>
                  </div>
                </td>
            </tr>
        </c:forEach>
    </table>