Bootstrap Modal with <%= image_tag> in Rails – Twitter bootstrap

I apologize for the newbie question. I was trying to implement the Bootstrap Modal feature on my rails App. Specifically, looking at applying to a <%=image_tag> so that when a user clicks on a specific image the modal is then activated. I looked at the following SO questions (Twitter Bootstrap Modal Form Submit) & (Bootstrap open image in modal) but after following the instructions, I still was not able to do it. I have provided all the relevant code below and thank you guys so much.

Initially (Image in the modal is the same – the first one) across each each item

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "block", id:"open-AddImgDialog",  data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
   <div class="modal-dialog" role="document" >
     <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= item.product %>
  </div>
  <br/>
  <h4 class="modal-title">
    <%= item.product %>
  </h4>
  <div class="modal-body">
    <div class="picture">
      <%= image_tag item.avatar.url(:medium) %>
    </div>        
    <br/>
    <br/>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>                
  </div>
</div>

application.js

$(document).on('click',"#open-AddImgDialog", function() {  
    $('#imagemodal').modal('show');   
});

Attempt 3 (Add Javascript to change image to pick up current image for correct item > no image is appearing)

index.html.erb

<%= image_tag item.avatar.url(:medium), class: "open-AddImgDialog", id:"test",  data: { target: "#myModal", toggle: "modal"} %>
<div class="modal fade" tabindex="-1" id="imagemodal" role="dialog">
   <div class="modal-dialog" role="document" >
     <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= item.product %>
  </div>
  <br/>
  <h4 class="modal-title">
    <%= item.product %>
  </h4>
  <div class="modal-body">
    <div id="picture" style="border: 1px solid black; width: 200px; height: 200px;">

      <canvas id="myCanvas" width="200" height="200"></canvas>

    </div>        
    <br/>
    <br/>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>                
  </div>
</div>

application.js

$(document).on('click',".open-AddImgDialog", function() {               
    html2canvas($("#picture"), {
        onrendered: function (canvas) {

            //theCanvas = canvas;
            //document.body.appendChild(canvas);
            //Canvas2Image.saveAsPNG(canvas); 

            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("test");

            var x = 0;
            var y = 0;
            var width = 200;
            var height = 200;

            ctx.drawImage(img, x, y, width, height);

        }
    });

});