When i use javascript in a jinja for loop to dynamically change the image source, it only works for the first image. The entire loop runs except the image part where the image source becomes unknown when there is more than one item created.

{% 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 %}