Javascript，jQuery，append重复相同的数据

Question

所以我从API获取数据。每个信息显示一个单独的div，并且在div中有一个模式弹出窗口。当我按模态时，会得到随机信息，但并非总是按我所按的信息。为什么会这样，我该如何解决？我希望弹出的窗口包含我所按的信息，而不是其他信息。感谢您的建议。

$("#header").append(`<div class='theDiv' id='theDiv'>
     <img class="picture" src=${showImage} alt="picture"/>
     <h1 id='name'>${showName}</h1>
     <h2 id='address'>${showAddress}</h2>
     <h2 id='number'>${showNumber}</h2>
        <div id="ex1" class="modal">
        <img class="picture" src=${showImage} alt="picture"/>
        <h1 class='name'>${showName}</h1>
        <h2 class='address'>${showAddress}</h2>
        <h2 class='number'>${showNumber}</h2>
        <h2 id='hours'>${showHours}</h2>
        <h2 id='website'><a href='${showWebsite}>website</a></h2>
        <h2 id='category'>Category: ${showCategory}</h2><br/>
        <h2 id='summary'>${showSummary}</h2>
        <a class='modal-info2'href="#" rel="modal:close">Close</a>
       </div>
       <p>
         <a class='modal-info'href="#ex1" rel="modal:open"> ...more info</a>
       </p>            
      </div>`)