How do you display images onto a canvas using Ruby's Carrierwave gem and Fabric.js?

First, I am a newbie and your help is much appreicated.

Hi, I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use CarrierWave to assist on storing my images in the database and I use Ruby's .each iterator to display the images on the page(see below). It works great.

<canvas id="canvas" width="300" height="550"></canvas>
 <% @images.each do |m| %>
  <%= image_tag m.photo_pic.url, :class => "my-image",  %>
 <% end %>

I then use a fabric.js javascript function to display the images in my canvas.(see below) It works However no matter what image I click it always displays the first image into the canvas. I would like to click the 10th image for example and the 10th image to display on my canvas. Is this possible?

var canvas = new fabric.Canvas('canvas');
 $(".my-image").on('click',function() {
  var imgElement = document.getElementsByClassName("my-image")
  var imgInstance = new fabric.Image(imgElement, {
   left: 50,
   top: 50,
 });
 canvas.add(imgInstance);
 });

Thanks again for your help. I might need a different title but I think this could really help others out who are using Ruby and Fabric.js in there projects. Best