Imagen iterando varias veces en popover

Tengo un div con varias imágenes que, cuando se desplaza sobre las imágenes, activa una ventana emergente que contiene la imagen sobre la que se desplazó y funciona. El problema es que cuando paso el mouse sobre otra imagen, agrega la nueva imagen flotante a la ventana emergente, pero no elimina la imagen flotante anterior. Traté de eliminar la imagen anterior en la ventana emergente, pero cada vez que lo hago, el programa se rompe y la imagen que se encuentra sobre el cursor ya no se muestra en la ventana emergente. ¿Qué hice mal? ¿Cómo puedo hacer que la imagen flotante específica solo se muestre en la ventana emergente activada?

Comenté lo que intenté eliminar de la imagen anterior antes de agregar la nueva imagen para que puedan ver la imagen iterativa actual sin que el programa se rompa.

ACTUALIZAR:

Después de eliminar la imagen adjunta anteriormente, el programa no muestra la imagen en la ventana emergente, pero cuando inspecciona el elemento, muestra que la imagen está allí por alguna razón, aunque no está visible en la ventana emergente. Confuso..??

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        '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
      //$('.infoBarElementContentView').remove()

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


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>

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

Tiene que vaciar .infoBarPopoverContentantes de agregarle la imagen actual.

Así que esto:

 $('.infoBarPopoverContent')
   .append('<div class="infoBarElementContentView"></div>')

se convierte en esto:

 $('.infoBarPopoverContent')
   .empty()
   .append('<div class="infoBarElementContentView"></div>')

Véalo funcionando:

function appendImg() {
  const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
  $('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
  addEvent();
}

var popOverSettings2 = {
  selector: '.infoBar .imgWrap',
  container: 'body',
  html: true,
  trigger: "manual",
  placement: 'top',
  sanitize: false,
  animation: false,
  content: function() {
    setTimeout(() => {
      $('.popover').css({
        '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
      //$('.infoBarElementContentView').remove()

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


function addEvent() {
  $(function() {
    $('.infoBar .imgWrap').popover(popOverSettings2)
      .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
          $(_this).popover('hide');
        });
      }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
          $('.popover').popover('hide');
        }
      });
  });
}

addEvent()
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
  <div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>

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