Image iterating multiple times in popover

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>