Grails: twitter bootstrap 3 modal has the same content on every iteration

Question

I have this code which iterates every item. Then it would display it in a list. Now i tried to show the individual item's details by <g:include controller="superAdmin" action="showMenuItemModal" id="${m.id}"/> in the bootstrap 3's modal's body.

It works but the problem is only the details on the top most level is showed in every modal. So if i have two or more items and lets say Item 1 is the first and i click the Item 2 but it still shows the Item 1 details

<g:each in="${menuInstance.menuItem}" var="m">
    <ul style="padding-left:0px;">
        <a href="#myModal" data-toggle="modal">${m.menuItemName?.encodeAsHTML()}</a>
    </ul>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <g:include controller="superAdmin" action="showMenuItemModal" id="${m.id}"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->                                              
</g:each>

Here is my showMenuItemModal

def showMenuItemModal(Long id){
    def menuItemInstance = MenuItem.get(id)
    if (!menuItemInstance) {
        flash.message = message(code: 'default.not.found.message', args: [message(code: 'menuItem.label', default: 'MenuItem'), id])
        redirect(action: "listMenu")
        return
    }

    [menuItemInstance: menuItemInstance]
}

and its showMenuItemModal.gsp

    <%@ page import="rms.MenuItem" %>   
        <div class="row" style="font-size:12px; border-radius:10px; background-color: #f5f5f5; margin:auto 0px auto 0px;">

            <div class="col-xs-7">
                <ol class="property-list">                              

                <g:if test="${menuItemInstance?.menuItemName}">
                <li class="fieldcontain">
                    <span id="menuItemName-label" class="property-label"><g:message code="menuItem.menuItemName.label" default="Menu Item Name" /></span>

                        <span class="property-value" aria-labelledby="menuItemName-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemName"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemDescription}">
                <li class="fieldcontain">
                    <span id="menuItemDescription-label" class="property-label"><g:message code="menuItem.menuItemDescription.label" default="Menu Item Description" /></span>

                        <span class="property-value" aria-labelledby="menuItemDescription-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemDescription"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.category}">
                <li class="fieldcontain">
                    <span id="category-label" class="property-label"><g:message code="menuItem.category.label" default="Category" /></span>

                        <span class="property-value" aria-labelledby="category-label"><g:fieldValue bean="${menuItemInstance}" field="category"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.price}">
                <li class="fieldcontain">
                    <span id="price-label" class="property-label"><g:message code="menuItem.price.label" default="Price" /></span>

                        <span class="property-value" aria-labelledby="price-label"><g:fieldValue bean="${menuItemInstance}" field="price"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.numberOfServing}">
                <li class="fieldcontain">
                    <span id="numberOfServing-label" class="property-label"><g:message code="menuItem.numberOfServing.label" default="Number Of Serving" /></span>

                        <span class="property-value" aria-labelledby="numberOfServing-label"><g:fieldValue bean="${menuItemInstance}" field="numberOfServing"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.cookingTime}">
                <li class="fieldcontain">
                    <span id="cookingTime-label" class="property-label"><g:message code="menuItem.cookingTime.label" default="Cooking Time" /></span>

                        <span class="property-value" aria-labelledby="cookingTime-label"><g:fieldValue bean="${menuItemInstance}" field="cookingTime"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.specialty}">
                <li class="fieldcontain">
                    <span id="specialty-label" class="property-label"><g:message code="menuItem.specialty.label" default="Specialty" /></span>

                        <span class="property-value" aria-labelledby="specialty-label"><g:fieldValue bean="${menuItemInstance}" field="specialty"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.difficulty}">
                <li class="fieldcontain">
                    <span id="difficulty-label" class="property-label"><g:message code="menuItem.difficulty.label" default="Difficulty" /></span>

                        <span class="property-value" aria-labelledby="difficulty-label"><g:fieldValue bean="${menuItemInstance}" field="difficulty"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.rating}">
                <li class="fieldcontain">
                    <span id="rating-label" class="property-label"><g:message code="menuItem.rating.label" default="Rating" /></span>

                        <span class="property-value" aria-labelledby="rating-label"><g:fieldValue bean="${menuItemInstance}" field="rating"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemNumber}">
                <li class="fieldcontain">
                    <span id="menuItemNumber-label" class="property-label"><g:message code="menuItem.menuItemNumber.label" default="Menu Item Number" /></span>

                        <span class="property-value" aria-labelledby="menuItemNumber-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemNumber"/></span>

                </li>
                </g:if>

                <g:if test="${menuItemInstance?.menuItemStatus}">
                <li class="fieldcontain">
                    <span id="menuItemStatus-label" class="property-label"><g:message code="menuItem.menuItemStatus.label" default="Menu Item Status" /></span>

                        <span class="property-value" aria-labelledby="menuItemStatus-label"><g:fieldValue bean="${menuItemInstance}" field="menuItemStatus"/></span>

                </li>
                </g:if>

                </ol>
            </div>

            <div class="col-xs-5">  
                <h5><strong>Picture</strong></h5>
                <g:if test="${menuItemInstance?.picture}">          
                        <img style="max-height: 250px; max-width: 250px; border:3px ridge;" src="${createLink(controller:'superAdmin' , action: 'menuItemPicture' , id: menuItemInstance.id)}" alt="Menu Item Picture" />
                </g:if> 
            </div>
        </div>

Answer 1

All your modal windows have same id id="myModal". So, first one with such id is used.

You have to make an uniq id for each modal, like:

....
    <a href="#myModal_${m.id}" data-toggle="modal">${m.menuItemName?.encodeAsHTML()}</a>
</ul>

<div class="modal fade" id="myModal_${m.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ....