How to refresh the content of Bootstrap Modal in jsp page?

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

Is anyone know what's the problem here?

My code shows as below:

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