set values from jquery array of objects php?

Question

I am getting particular list of product items through ajax, by passing their unique id to server. Now each product has its own set of properties which I have to display on page with product image. When I set the values through jquery, only last value in the array got printed. Following are my coding files.

images.php

while($fetch = mysql_fetch_array($result))
      {
      ?>

      <div class="col-sm-4">
       <div class="thumbnail">

        <a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>" alt="<?php echo $fetch['imageURL'];?>" /></a>

        <div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div>
        <div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div>
        <span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span>

       </div>
      </div>
      <?php
      }

js file

$(document).ready(function(){
  $('.menProdCatgry').on('click',function(){
   $.ajax({
    type: "post",
    url: "getselectedproducts.php",
    data:{
     "prodId" : $('.menProdCatgry').attr('prodCatId')
    },
    dataType: "json",
    success: function(data){
     console.log(data);
     $.each(data, function(){
     var getprodId = this.prodId;
     var getimageURL = this.imageURL;
     var getprice = this.price;
     var getitemName = this.itemName;
     var getitemID = this.itemID;

     $('.productimage').attr('src','uploadedfiles\/'+getimageURL);
     $('.productitemname').text(getitemName);
     $('.productprice').text(getprice);
     $('.productitemid').attr('href','productpurchase.php?id='+getitemID);

      });

    },
    error: function(data){
     console.log(data);
    }

   });
  });
 });

Answer 1

You can see the code of the foreach is only overwriting the values and attributes of the

 $('.productimage'),
 $('.productitemname') 
 // and so on

so you only see the last data of the response

$.each(data, function() {
            var getprodId = this.prodId;
            var getimageURL = this.imageURL;
            var getprice = this.price;
            var getitemName = this.itemName;
            var getitemID = this.itemID;

            // create a tag
            var a = $('<a/>');
                a.attr('href', 'productpurchase.php?id='+getitemID);
            // create new image
            var img = $('<img/>');
                img.attr('src', 'uploadedfiles/'+getimageURL);

            var prodname = $('<div/>')
                prodname.html(getitemName);

            var prodprice = $('<div/>');
                prodprice.html(getprice);
                // insert image to a
                a.append(img);

            var container = $('<div/>');
            // combine them all
            container.append(a);
            container.append(prodname);
            container.append(prodprice);
            // append to document
            // you can change this according to you need
            // to accomplish
            $('body').append(container);

        });

here i created a dynamic dom element for every iteration of the foreach then it will create a new sets of data then it will insert/include/append to the html element