<script type="text/javascript">
    var ma_childCount = ${taskProcedureInstance?.maintenanceActions.size()} + 0;
    var ma_wrapperId = "ma_wrapper";
    var ma_cloneId = "maintenanceActionLazyList_clone";
    var ma_lazyList = "maintenanceActionLazyList";
    var ma_fields = ["toBeDeleted", "isNew", "description", "pageRef", "assetSubItem.id", "procedureStepNumber"];
    var ma_focusField = "procedureStepNumber";

    // Click event on add button.
    jQuery('.add-ma').live('click', function() {
        addChild(ma_wrapperId, ma_cloneId, ma_lazyList, ma_fields, ma_focusField, ma_childCount);
        ma_childCount++;
    });

    // Click event on delete buttons.
    jQuery('.del-ma').live('click', function() {
        //find the parent div
        var prnt = jQuery(this).parents(".ma-div");
        //find the deleted hidden input
        var delInput = prnt.find("input[id$=toBeDeleted]");
        //check if this is still not persisted
        var newValue = prnt.find("input[id$=isNew]").attr('value');
        //if it is new then i can safely remove from dom
        if(newValue == 'true'){
            prnt.remove();
        }else{
            //set the deletedFlag to true
            delInput.attr('value','true');
            //hide the div
            prnt.hide();
        }
    });

    jQuery(window).load(function() {
        if(ma_childCount == 0) {
            addChild(ma_wrapperId, ma_cloneId, ma_lazyList, ma_fields, ma_focusField, ma_childCount);
            ma_childCount++;
        }
    });

</script>



    <div>
        <table>
            <thead>
                <tr>

                    <th>Step</th>
                    <th>Assembly</th>
                    <th>Description</th>
                    <th>Page Ref</th>
                    <th></th>

                </tr>
            </thead>
            <tbody id="ma_wrapper">
                <g:each var="ma" in="${taskProcedureInstance.maintenanceActions}" status="i">
                        <g:render template="maintenanceAction" model="['tp':taskProcedureInstance,
                                                                                                            'ma': ma,
                                                                                                            'i':i,
                                                                                                            'assemblies': assemblies]" />
                </g:each>
            </tbody>
        </table>
    </div>

    <br />

    <div style="text-align:right;">
        <span class="buttons add-ma">
            <input type="button" class="add" value="Add MaintenanceAction" />
        </span>
    </div>
