Hi, 

I am building a sticker app that a user clicks a sticker and it adds to the HTML 5 canvas. 

At the moment, when you click on a sticker it adds it, GREAT!

If you click it again it adds it the amount of times how ever many items that have the class sticker

So if there are 3 items that have the class sticker they all get added, I only want to add 1 item when I click on one item, please help?

HTML + PHP

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

JQuery

$(".sticker").on("click", function(){

var stickerclass = $(this).find("img" ).attr("class");
var this_overlay = $(this).find(".path").attr('id');
var this_category = $(this).find(".category").val();

var _overlay = $('#'+this_overlay+'');
console.log(_overlay);
if( $(element).hasClass(stickerclass) ) {
   var overlay = _overlay.val();
   overlay = petUtil.getImage(overlay);
   fabric.Image.fromURL(overlay, function (image) {
      if (this_category == "Badges") {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: false
         });
      } else {
         image.set({
            left: 0, top: 0, angle: angle, cornersize: 0, absolutePositioned: true,
            hasControls: true
         });
      }

      image.scale(scale).setCoords();
      _canvas.add(image);
      _canvas.bringToFront(image);
   });
};
});