我使用模板文字来显示一些获取的数据，我已经设法显示我需要的一切前端，但有些内容是隐藏的，因为这意味着是可切换的，然而，我有点迷失，至于我如何才能链接每个特定的按钮，需要显示的html模板的特定部分。
做这件事的最好方法是什么？
我如何能够指定在单击特定按钮时显示特定div？
我已经到了获取按钮点击值的地步，我的想法是将其链接到我想要显示的div的特定ID，但我迷路了，任何帮助都将是伟大的，我如何才能解决这个问题。
我只是想把显示从无切换到屏蔽。

const link = './data copy.json';

// const container = document.getElementById('.item-container');
fetch(link)
  .then(res => {
    return res.json();
  })
  .then(data => {
    console.log(data);

    data.forEach(gun => {
      const template = `
    <div class="ticket ticket-${gun.ticket}">
    <div class="id card"><p>${gun.gunId}</p>
  </div>
    <div class="location card">
      <p class="gun-id">${gun.location}</p> 
    </div>
    <div class="description card">
      <button class="view" value="${gun.gunId}"onclick="modalForm()">Details</button>
      <div  class="modal" id="modal-${gun.ticket}">
      <form class="modal-content" id="" data-value="${gun.gunId}"onsubmit="event.preventDefault(); validateForm();">
        <div class="form-header">
          <h1 id="" class="gun-form-name">${gun.gunId}</h1>
          <span id="" class="close" onclick="closeModal()">×</span>
          <span id="" class="back-arrow fa-lg" type="button" onclick="goBack()" role="button" aria-label="Go Back Button"><i class="fa-solid fa-arrow-left"></i>
           </span></div>
        <section class="main-content">
          <div class="container">
            <div class="card">
                <div class="wrapper">
                  <h3>${gun.gunId}</h3>
                    <div class="img">

                        <img class="gun-image"src="gun image.PNG" alt="test">
                        <div class="btn-overlay">

                        <button class="overlay-btn btn-1" value="${gun.partId.lightPipeId}"type="button">${gun.partId.lightPipeId}</button>
                        <button class="overlay-btn btn-2" value="${gun.partId.lightbugId}"type="button">${gun.partId.lightbugId}</button>
                        <button class="overlay-btn btn-3" value="${gun.partId.batteryId}"type="button">${gun.partId.batteryId}</button>
                        <button class="overlay-btn btn-4" value="${gun.partId.triggerId}"type="button">${gun.partId.triggerId}</button>
                        <button class="overlay-btn btn-5" value="${gun.partId.triggerPcb}"type="button">${gun.partId.triggerPcb}</button>
                        <button class="overlay-btn btn-6" value="${gun.partId.triggerSpring}"type="button">${gun.partId.triggerSpring}</button>
                        <button class="overlay-btn btn-7" value="${gun.partId.grayCable}"type="button">${gun.partId.grayCable}</button>
                        <button class="overlay-btn btn-8" value="${gun.partId.powerCableid}"type="button">${gun.partId.powerCableid}</button>
                        <button class="overlay-btn btn-9" value="${gun.partId.stockPcb}"type="button">${gun.partId.stockPcb}</button>
        
                    </div>
                    </div>
                    <div class="details">
                           <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>
                           <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p> 
                           <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p> 
                           <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p> 
                           <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi ut iure molestiae dolores commodi amet reiciendis recusandae voluptatem porro cumque fuga excepturi eum necessitatibus, vel, assumenda alias voluptas debitis veniam.</p>  
                    </div>
                    <div class="btn">
                        <button class="close-ticket"type="button">Close Ticket</button>
                    </div>
                </div>
            </div>
        </div>
        </section>
        
      </form>
    </div>
  
    </div>
  <div class="close-bt card">
    <button class="delete-button"id="${gun.gunId}">Close</button>
    </div>
    </div>
  </div>`
      document.getElementById('item-container').insertAdjacentHTML('beforeend', template);

      const modal = document.querySelectorAll(`#modal-${gun.ticket}`);
      const btns = document.querySelectorAll('.view').value;
      console.log(btns);
      for (let i = 0; i < modal.length; i++) {
        let child = modal[i];
        console.log(child);
      // switch()
    };
  });
    document.getElementById('open-tickets').innerHTML = data.length;
    document.querySelectorAll('button').forEach(button => {
      const modal = document.querySelectorAll(`#modal-${gun.ticket}`);
console.log(modal);
      button.addEventListener('click', () => {
          const fired_button = button.value;
          alert(fired_button);
          modal.style.display = "block";
          // modal2.style.display = "none";
      });

  });
})
  .catch(error => console.log(error));

输出如下：