Change value of input inside an struts2 iterator using javascript

Question

I need to change the value of an input type text which is inside an iterator of struts2. I don't like to refresh all the page, I like to refresh the value of the input only and I think that using JSON could be a solution (I'm not sure if this is the best way, I'm junior programmer...)

This is my jsp

<input type="text" name="cantidad" id="cantidadIndividual" readonly="readonly" value="<s:property value="#a.cestaUnidades"/>">
    <img src="../Imagenes/Administracion/Signo_Mas.png" id="mas" onclick="MasMenosCantidad('+',<s:property value="#a.cestaUnidades"/>,<s:property value="#a.cestaId"/>,<s:property value="#a.ropaStock.rostockUnidades"/>);"/>

    <script>
            function MasMenosCantidad(valor,cantidad,id,stock){
                document.getElementById("clave").value = id;
                if(valor == '+'){
                    cantidad++;
                }
                if(valor == '-'){
                    cantidad--;
                }
                if(cantidad <= stock){
                    document.getElementById("cantidadIndividual").value = cantidad;
                    usarAJAXCantidad(id,cantidad);
                    //document.getElementById("formCantidad").submit();
                } else {                    
                    if(valor == '-'){
                        document.getElementById("cantidadIndividual").value = stock;
                        usarAJAXCantidad(id,cantidad);
//                        document.getElementById("formCantidad").submit();
                    } else {
                        alert("Stock excedido");
                        }
                    }
                }
            }
            function usarAJAXCantidad(clave,cant){
                $.getJSON('ajaxCantidad', {
                    clave : clave,
                    cantidad : cant
                }, function(jsonResponse3) { 
                    var nuevaCantidad = $('#cantidadIndividual');
                    $.each(jsonResponse3.stateMap3, function(key, value) {
                        nuevaCantidad.value = value;
                    });
                });
            }            
        </script>

The strutx.xml

<action name="ajaxCantidad" class="Acciones.HomeCesta" method="ajaxCantidad">
            <result type="json">
                <param name="excludeNullProperties">true</param>
                <param name="noCache">true</param>
            </result>
        </action>

HomeCesta.java

public String ajaxCantidad() throws Exception {

        c = ControladoresDAO.cCesta.RecuperaPorId(clave);
        c.setCestaUnidades(cantidad);
        ControladoresDAO.cCesta.Modifica(c);
        stateMap3.clear();
        stateMap3.put("", ""+cantidad);
        return SUCCESS;

    }

My problem is that in the iterator, only the first input with id cantidadIndividual is refreshed, but if I made click in a second, third... button with image Signo_Mas.png, the value is showing in the first input with id cantidadIndividual.

Answer 1

When you use document.getElementById("cantidadIndividual") only the first element with the same id is returned. You should change ids to be unique for each iteration.

You can use a variable in JSP like this

document.getElementById("cantidadIndividual${uniqueIdentifier}")

or if you are using Struts2

document.getElementById("cantidadIndividual<s:property value='%{uniqueIdentifier}'/>")