Image iterating multiple times in popover

I have a div with multiple images that when hovered on the images triggers a popover that contains the image that was hovered on and It kinda works. The problem is when I hover on another image It appends the new hovered image to the popover but it doesn’t remove the previous hovered image. I tried to remove the previous image in popover but whenever I do it breaks the program and the hovered image doesn’t show on the popover anymore. Where did I go wrong? How can I make the specific hovered image only show on the triggered popover?

I commented out what I tried to remove the previous image before appending the new image so that you guys can look at the current iterating image without the program breaking.

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src=""></div>')

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
        'width': '20%',
        'height': '20%',
        'overflow': 'auto'
    if ($(this).attr('class') == 'imgWrap') {
      const currnetInfoBarElementView = $(this).attr('id')
      let source = $("#" + currnetInfoBarElementView).children()

      //This is what I tried removing the previous appended container so that it won't iterate but it doesn't work

      $('.infoBarPopoverContent').append('<div class="infoBarElementContentView"></div>')
      $('.dataDisplayClone img').css({
        'width': '100%',
        'height': '100%'
      return $('.infoBarPopoverContent').html();

var infoBarElementLength = []
infoBarElementLength.push($('.infoBar .imgWrap').length)
setInterval(() => {
  const currentInfoBarElementLength = $('.infoBar .imgWrap').length;

  if (currentInfoBarElementLength > infoBarElementLength[0]) {
    infoBarElementLength = []

function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(".popover").on("mouseleave", function() {
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
button {
  position: absolute;
  top: 0%;
  left: 0%;

.infoBar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30%;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;

.infoBarPopoverContent {
  display: none;

.popover .popover-body {
  overflow-x: auto;
<script src=""></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<button onclick='appendImg()'>Click to append img</button>

<div class="infoBar" id="infoBar">
  <div class="imgWrap" id='test1'><img src=""></div>
  <div class="imgWrap" id='test2'><img src=""></div>
  <div class="imgWrap" id='test3'><img src=""></div>
  <div class="imgWrap" id='test4'><img src=""></div>
  <div class="imgWrap" id='test5'><img src=""></div>

<div class="infoBarPopoverContent"></div>


How to send contract using web3gl to smart contract

A different approach to responsive styling for React Native Web apps who use Server Side Rendering