Why javascript only runs on the first record and not in others

Question

I have a problem, i recovered data from a file using a foreach to the data in each row show a button to edit, that calls a modal window in the window that select a type of criteria and the corresponding inputs are shown, the problem is that in the first row only does and not in others.

part of the code:

  if (sel2.value == "actual") { document.getElementById("divactual").style.display = "block"; divT=document.getElementById("divnuevo"); divT.style.display = "none"; } if(sel2.value == "nuevo"){ document.getElementById("divnuevo").style.display = "block"; divT=document.getElementById("divactual"); divT.style.display = "none"; } if(sel2.value == "vacio"){ document.getElementById("divnuevo").style.display = "none"; divT=document.getElementById("divactual"); divT.style.display = "none"; } } 

 #divnuevo, #divactual{ display: block; } 

  <table class="table table-list-search table-striped table-bordered text-table"> <thead> <tr> <th class="text-center">Tipo de Regla</th> <th class="text-center">Nombre Campo</th> <th class="text-center">Nombre Regla</th> <th class="text-center">Pos Ini</th> <th class="text-center">Pos Fin</th> <th class="text-center">Token</th> <th class="text-center">Criterio</th> <th class="text-center">Argumentos</th> <th class="text-center">Descripción</th> <th></th> </tr> </thead> <tbody> <c:choose> <c:when test="${generals.size()==0}"> <td colspan="11"><h3 class="text-danger">No existen Registros de Reglas Generales en el Archivo</h3> </td> <br/> </c:when> <c:otherwise> <c:forEach items="${generals}" var="generals"> <tr> <td>${generals.tipoRegla}</td> <td>${generals.nomCampo}</td> <td>${generals.nomRegla}</td> <td>${generals.posIni}</td> <td>${generals.posFin}</td> <td>${generals.token}</td> <td class="wrap"><p class="test"> ${generals.criterio} </p> </td> <td class="wrap"><p class="test2">${generals.argumentos} </p> </td> <td class="wrap"><p class="test"> ${generals.descrip} </p> </td> <c:set var="salary" scope="session" value="${generals.nomRegla}"/> <td> <a role="button" data-target="#Modificar_${generals.token }_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" class="btn btn-default modify" data-toggle="modal"> <span class="fa fa-pencil-square-o white"></span> </a> <form action="deletegeneral" method="POST"> <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" /> <input type="hidden" value="${generals.nomRegla}" name="dnomRegla"> <button type="submit" class="btn btn-default delete" onclick="showAlert('&iquest;Est&aacute; seguro que desea eliminar la regla \\n &#34; ${generals.nomRegla} &#34;?',3);"> <span class="fa fa-trash-o white"></span></button> </form> <!--button type="button" class="btn btn-default modify" data-toggle="modal" data-target="#Modificar2"><span class="fa fa-pencil-square-o white"></span></button--> </td> </tr> <!--Para Modal de Modificacion--> <div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modificar Regla</h4> </div> <!-- Modal Body --> <div class="modal-body"> <form action="actualizargenerals" method="POST"> <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" > <label for="exampleInputPassword1">Tipo Regla</label> <input type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required> <label for="exampleInputPassword1">Campo</label> <input type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required> <label for="exampleInputPassword1">Regla</label> <input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required /> <label for="exampleInputPassword1">Inicio</label> <input type='number' name='posIni' class='form-control' id='posInicial' placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" /> <label for="exampleInputPassword1">Fin</label> <input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required> <c:choose> <c:when test="${generals.tipoRegla eq 'TOKEN' }"> <label for="token">Token</label> <input type='text' name='token' class='form-control' id='token' value="${generals.token}" placeholder="Token"> </c:when> </c:choose> <label for="exampleInputPassword1">Argumentos</label> <div class="row"> <select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" > <option selected value="vacio" >----------</option> <option value="actual" >ACTUAL</option> <option value="nuevo" >NUEVO</option> </select> <div id="divactual" name="divactual"> div actul no mostrara mas que el valor actual </div> <div id="divnuevo" name="divnuevo"> div nuevo tendra mas elementos </div> </div> <!-- Modal Footer --> <div class="modal-footer"> <div class="row"> <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> <button href="#" class="btn btnAceptar">Modificar Regla</button> </div> <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> <button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button> </div> </div> </div> </form> </div> </div> </div> </div> <!--Finaliza Modal de modifacion--> </c:forEach> </c:otherwise> </c:choose> </tbody> </table> 

ideas?

Answer 1

Here is an example of placing the code below the closing table tag.

</table>
<c:if test="${generals.size()!=0}">
    <c:forEach items="${generals}" var="generals">
        <!--Para Modal de Modificacion-->
        <div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Modificar Regla</h4>
                    </div>
                    <!-- Modal Body -->
                    <div class="modal-body">
                        <form action="actualizargenerals" method="POST">
                            <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" >
                            <label for="exampleInputPassword1">Tipo Regla</label>
                            <input  type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required>


                            <label for="exampleInputPassword1">Campo</label>
                            <input  type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required>


                            <label  for="exampleInputPassword1">Regla</label>
                            <input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required />


                            <label for="exampleInputPassword1">Inicio</label>
                            <input type='number' name='posIni' class='form-control' id='posInicial'  placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" />

                            <label  for="exampleInputPassword1">Fin</label>
                            <input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required>

                            <c:choose>
                                <c:when test="${generals.tipoRegla eq 'TOKEN' }">
                                    <label for="token">Token</label>
                                    <input type='text' name='token' class='form-control' id='token' value="${generals.token}"  placeholder="Token">
                                </c:when>
                            </c:choose>

                            <label for="exampleInputPassword1">Argumentos</label>
                            <div class="row">

                                <select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" >
                                    <option selected value="vacio" >----------</option>
                                    <option value="actual" >ACTUAL</option>
                                    <option value="nuevo" >NUEVO</option>
                                </select>

                                <div id="divactual"  name="divactual">
                                    div actul no mostrara mas que el valor actual
                                </div>

                                <div id="divnuevo"  name="divnuevo">
                                    div nuevo tendra mas elementos
                                </div>
                            </div>

                            <!-- Modal Footer -->
                            <div class="modal-footer">
                                <div class="row">
                                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
                                        <button href="#" class="btn btnAceptar">Modificar Regla</button>
                                    </div>

                                    <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6">
                                        <button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!--Finaliza Modal de modifacion-->
    </c:forEach>
</c:if>

So just move the modal code and leave the rest as is.

EDIT:

Here is an example of your changeFunc4 function written in jQuery to target just the elements next to the current select box:

function changeFunc4(sel2){
var sel = $(sel2);
if (sel.val() == "actual") {
        sel.siblings( ".divactual" ).show();
        sel.siblings( ".divnuevo" ).hide();
    }
    if(sel.val() ==  "nuevo"){
        sel.siblings( ".divnuevo" ).show();
        sel.siblings( ".divactual" ).hide();
    }
    if(sel.val() == "vacio"){
        sel.siblings( ".divnuevo" ).hide();
        sel.siblings( ".divactual" ).hide();    
    }
}

Note, this uses css class reference so you need to update your divs to include a class. eg

<div id="divactual" class="divactual"  name="divactual">
    div actul no mostrara mas que el valor actual
 </div>