How do I add a 3D model attached to an image tracker when a button is pressed with A-Frame/ 8th Wall?

Question

I am very new to A-Frame and 8th wall so apologies if this has an obvious answer! I am trying to have a button and video that appears when an image target is scanned, and then a 3D object appears over the video once the button is pressed. The 3D object should also be attached to the image target (should disappear when the image target is out of frame). How do I do this?

I have attached a button and video to the image target, declared the model and added an event listener but it doesn't seem to work. As a side note, the text that is meant to show on the button also doesn't seem to be appearing. Any advice would be much appreciated!

<a-entity
    id="model"
    gltf-model="#jelly-glb"
    class="cantap"
    xrextras-hold-drag
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    scale="3 3 3"
    shadow="receive: false"
    visible="false">
  </a-entity>

...

  <xrextras-named-image-target name="pixelated">
    <a-entity
      xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
      geometry="primitive: plane; height: 1; width: 0.79;"></a-entity>
    <a-entity
      id="display-button"
      geometry="primitive: plane; height: 0.5; width: 2;"
      material="color: black"
      text="value: Hello."
      position="0 0 -2"></a-entity>
  </xrextras-named-image-target>

const tapShowComponent = {
  init() {
    const ground = document.getElementById('ground')
    const button = document.getElementById('display-button')
    const model = document.getElementById('model')

    button.addEventListener('click', (event) => {
      model.setAttribute('visible', 'true')
      console.log('click')
    })
  },
}

export {tapShowComponent}