Pretty new to code so forgive me if I stumble around some wording here, but I'm trying to use IntersectObserver to show a specific image when its corresponding text is shown in a scroll menu. Right now the appropriate images appear when the text is shown in the scroll menu, however, they appear in a flexbox column type manner and I would like them to replace each other once the text is no longer intersecting with the scroll menu. Are there any ideas how I might be able to do this?

const observer = new IntersectionObserver(entries => {
  entries.forEach(elem => {
    if (elem.isIntersecting) {
      const append = $(elem.target).append()
      const text = $(elem.target).text()

      
      switch (append, text) {
        case 'ALEX':
          $('.image-content').append("<img class='img' src='images/ALEX.gif'/>")
          break
        case 'CHANEL':
          $('.image-content').append("<img class='img' src='images/CHANEL.gif'/>")
          break
        case 'LAURA':
          $('.image-content').append("<img class='img' src='images/LAURA.gif'/>")
          break
        case 'NATHAN':
          $('.image-content').append("<img class='img' src='images/NATHAN.gif'/>")
          break
        case 'RON':
          $('.image-content').append("<img class='img' src='images/RON.gif'/>")
          break
        case 'STACEY':
          $('.image-content').append("<img class='img' src='images/STACEY.gif'/>")
          break
        case 'VINCE':
          $('.image-content').append("<img class='img' src='images/VINCE.gif'/>")
          break
        default:
          $('.image-content').text(`Sorry, no more companions available ${text}.`)
      }
    }
  })
})

// Select all the options in the left
$('.companion-names').each(function () {
  // For each item we want to observe whether it is visible using the function above
  observer.observe(this)
})