Как отобразить увеличенную версию изображения, используя bootstrap popover?

Question

В настоящее время у меня есть программа, которая принимает пользовательские данные и отображает их в динамически создаваемую таблицу. Одним из входных данных является изображение, переданное через входной файл типа. Я хочу иметь возможность увеличить это изображение с помощью всплывающего окна при наведении на него (указатель мыши) в самой таблице.

Ниже - код jQuery, который я использовал до сих пор, я не уверен, почему он не будет работать. Я полагаю, что это как-то связано с «this», переданным через функцию popover.

//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'
   })
})

Основными направлениями являются следующие строки кода:

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 помощь будет принята с благодарностью!