Two image targets, only one works

I have two image targets but the second one is not read when I test the preview. when I try the preview, only the
name=“target1”
works.

this one does not work:
name=“target2”

I’d appreciate your help.

here are my code:

head.html:

body.html:


<img id="eggPNG" src="assets/eggNest.png" />

<video
  id="eggHatching"
  crossorigin="anonymous"
  loop="true"
  muted
  autoplay
  playsinline
  webkit-playsinline
  src="assets/Egg-Cracking.mp4"></video>

<video
  id="babyBird"
  crossorigin="anonymous"
  loop="true"
  muted
  autoplay
  playsinline
  webkit-playsinline
  src="assets/Baby-Bird.mp4"></video>

<video
  id="birdVideo"
  crossorigin="anonymous"
  loop="true"
  muted
  autoplay
  playsinline
  webkit-playsinline
  src="assets/Flying-Bird.mp4"></video>

<!-- second image target -->
<img id="eggPNG1" src="assets/Wall2-vector.jpg" />
<video
  id="eggHatching1"
  crossorigin="anonymous"
  loop="true"
  muted
  autoplay
  playsinline
  webkit-playsinline
  src="assets/Heron_Cartoon_Video_Ready.mp4"></video>

<video
  id="babyBird1"
  crossorigin="anonymous"
  loop="true"
  muted
  autoplay
  playsinline
  webkit-playsinline
  src="assets/jellyfish-video.mp4"></video>




<a-video
  id="eggVideoEntity1"
  src="#eggHatching1"
  width="1"
  height="1"
  position="0 0 0.01"
  material="shader: flat; src: #eggHatching1">
</a-video>

<a-video
  id="babyBirdVideoEntity1"
  src="#babyBird1"
  width="1"
  height="1"
  position="0 0 0.01"
  material="shader: flat; src: #babyBird1">
</a-video>

<a-video
  id="BirdVideoEntity1"
  src="#birdVideo"
  width="1"
  height="1"
  position="0 0 0.01"
  material="shader: flat; src: #birdVideo">
</a-video>

app.js:
AFRAME.registerComponent(‘egg-hatch’, {
init() {
const egg = document.querySelector(‘#egg’)
const hatchingVideo = document.querySelector(‘#eggHatching’)
const hatchingVideoEntity = document.querySelector(‘#eggVideoEntity’)
const videoBabyBird = document.querySelector(‘#babyBird’)
const BabyBirdVidEntity = document.querySelector(‘#babyBirdVideoEntity’)
const videoBird = document.querySelector(‘#birdVideo’)
const BirdVidEntity = document.querySelector(‘#BirdVideoEntity’)
// Second image target
const egg1 = document.querySelector(‘#egg1’)
const hatchingVideo1 = document.querySelector(‘#eggHatching1’)
const hatchingVideoEntity1 = document.querySelector(‘#eggVideoEntity1’)
const videoBabyBird1 = document.querySelector(‘#babyBird1’)
const BabyBirdVidEntity1 = document.querySelector(‘#babyBirdVideoEntity1’)

// hide videos on realityready
this.el.sceneEl.addEventListener('realityready', () => {
  hatchingVideoEntity.setAttribute('visible', false)
  BabyBirdVidEntity.setAttribute('visible', false)
  BirdVidEntity.setAttribute('visible', false)
})

egg.addEventListener('click', () => {
  egg.parentNode.removeChild(egg)

  hatchingVideo.play()
  hatchingVideoEntity.setAttribute('visible', true)
  hatchingVideoEntity.classList.add('cantap')
})

hatchingVideoEntity.addEventListener('click', () => {
  hatchingVideo.pause()
  hatchingVideoEntity.parentNode.removeChild(hatchingVideoEntity)

  videoBabyBird.play()
  BabyBirdVidEntity.setAttribute('visible', true)
  BabyBirdVidEntity.classList.add('cantap')
})

BabyBirdVidEntity.addEventListener('click', () => {
  videoBabyBird.pause()
  BabyBirdVidEntity.parentNode.removeChild(BabyBirdVidEntity)

  videoBird.play()
  BirdVidEntity.setAttribute('visible', 'true')
  BirdVidEntity.classList.add('cantap')
})

// Second image target, hide videos on realityready
this.el.sceneEl.addEventListener('realityready', () => {
  hatchingVideoEntity1.setAttribute('visible', false)
  BabyBirdVidEntity1.setAttribute('visible', false)
  BirdVidEntity.setAttribute('visible', false)
})

egg1.addEventListener('click', () => {
  egg1.parentNode.removeChild(egg1)

  hatchingVideo1.play()
  hatchingVideoEntity1.setAttribute('visible', true)
  hatchingVideoEntity1.classList.add('cantap')
})

hatchingVideoEntity1.addEventListener('click', () => {
  hatchingVideo1.pause()
  hatchingVideoEntity1.parentNode.removeChild(hatchingVideoEntity1)

  videoBabyBird1.play()
  BabyBirdVidEntity1.setAttribute('visible', true)
  BabyBirdVidEntity1.classList.add('cantap')
})

BabyBirdVidEntity1.addEventListener('click', () => {
  videoBabyBird1.pause()
  BabyBirdVidEntity1.parentNode.removeChild(BabyBirdVidEntity1)

  videoBird.play()
  BirdVidEntity.setAttribute('visible', 'true')
  BirdVidEntity.classList.add('cantap')
})

},

})