I have 5 images

in my console, I am getting

I'm expecting t o see:

badge_img1

badge_img1

here is my html:

<?php while ($row = $statement->fetch()) { ?>
    <div class="sticker">
        <input type="hidden" class="stickerid" id="<?php echo $row['stickerid'];?>">
        <input type="hidden" class="path" id="<?php echo $row['hiddenid'];?>" value="/adbuild/assets/images/<?php echo $row['path'];?>" class="last"  />
        <img src="/adbuild/assets/images/<?php echo $row['path'];?>" class="<?php echo $row['classname'];?>" width="50" />
    </div>
<?php } ?>

and here is my jQuery:

$('.sticker').each(function (index){

   var stickerclass = $("img").attr("class");
   var _overlay = $(".path").attr('id');

   console && console.log(stickerclass);
   console && console.log(_overlay);

             if( $(element).hasClass(stickerclass) ) {
       var overlay = _overlay.val();
      overlay = petUtil.getImage(overlayBadge1);
      fabric.Image.fromURL(overlay, function (image) {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: false
         });
         image.scale(scale).setCoords();
         _canvas.add(image);
         _canvas.bringToFront(image);
      });
   }
});

Any help is much appreciated!