Cuando uso javascript en un jinja for loop para cambiar dinámicamente la fuente de la imagen, solo funciona para la primera imagen. Se ejecuta todo el bucle excepto la parte de la imagen en la que el origen de la imagen se vuelve desconocido cuando se crea más de un elemento.

 {% for i in restadmin %} <input type="text" name="" value="{{i.iname}}" hidden="true" id="pname"> <div class="col-sm-6 col-md-4"> <div class="menu menuName0 thumbnail" id=""> <h3>{{ i.iname }}</h3> <div> <img src="" id="productimage" class="img-responsive"> </div> <script> var pname = document.getElementById("pname").value var image = document.getElementById("productimage") console.log(pname) image.src = "../static/images/product_image/" + pname + ".png" </script> <h1></h1> <h5 class="caption > p">{{i.idesc}}</h5> <h4 class="price">${{i.iprice}}</h4> <input type="text" id="{{ i.iid }}a" name="a" src="" rows="1" cols="3" value="{{ i.iprice }}" readonly style="border: none;background-color: transparent; outline: none; text-align: center;" hidden="true"> <input type="text" id="{{ i.iid }}b" name="b" value=0 readonly hidden="true"> <!-- <button class="btn-order"><glyphicon class="glyphicon glyphicon-shopping-cart"></glyphicon> Commander</button> --> <button class="btn-order" id="{{ i.iid }}" name="{{ i.iid }}" onClick="additem();">Add</button> <button class="btn-order btn-danger navbar-btn" id="{{ i.iid }}" name="{{ i.iid }}" onClick="removeitem();">Remove</button> </div> </div> {% endfor %}