How to display an enlarged version of an image using a bootstrap popover?

I currently have a program which takes user inputs and displays them into a dynamically created table. One of the inputs are an image passed through an input of type file. I want to be able to enlarge this image using a popover while hovering over it (mouseover) in the table itself.

Bellow is the jQuery code i have used so far, i am unsure as to why it would not be working. I believe it has something to do with the "this" passed through in the popover function..

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" + "<img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'>" + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='openModal(); deleteData(this);'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );
}

$('#imageEnlarge').on("mouseover", function() {
  $('[data-toggle="popover"]').popover({
         //trigger: 'focus',
     trigger: 'hover',
         html: true,
         content: function () {
       return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
         },
         title: 'Enlarged Image'
   })
})

The main points of focus are these lines of code:

var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

"<td>" + "<img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'>" + "</td>"

$('#imageEnlarge').on("mouseover", function() {
  $('[data-toggle="popover"]').popover({
         //trigger: 'focus',
     trigger: 'hover',
         html: true,
         content: function () {
       return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
         },
         title: 'Enlarged Image'
   })
})

Any help would be greatly appreciated !