только первый тег img продолжает меняться с тега * ngFor li

Question

Я пытаюсь создать всплывающее описание при наведении мыши на

Это HTML-код

  <div class = "col-12 container" id = {{i}}>
    <ul class= "list-unstyled row">
      <li *ngFor = "let z of data(m[m.length-1]) | slice: 0 : 10; index as j" class = "list-item col-6">
        <img id = "champ" src = {{z[0]}}/>
        <div id = "spells">
          <img (mouseover)="pop(z[1].description, $event)" (mouseout) = "desc = out()" src = {{z[1].spellurl}}/>
          <img (mouseover)="pop(z[2].description, $event)" (mouseout) = "desc = out()" src = {{z[2].spellurl}}/>
        </div>
        <div id = "desc"></div>
      </li>
    </ul>

Это функции для наведения мыши и наведения мыши

    pop(desc: string, event){
    let ds = document.getElementById("desc");
    let pos = event.target.getBoundingClientRect();
    let newpos = "translate(" + pos.right + "px, " + pos.bottom+ "px)";
    ds.style.display = "block";
    ds.innerHTML = desc;
    ds.style.transform = newpos;
}
    out(){
    let ds = document.getElementById("desc");
    ds.style.display = "none";
}

Это основной пользовательский интерфейс, подобный следующему:

Я пытаюсь сделать так, чтобы, когда мышь находилась над одним из этих маленьких изображений, получала позициюоб этом и отобразить описание DIV в нижней части правой части изображения.

Проблема в том, что, хотя я пытался навести курсор на все изображения, все описание div было отображено в той же позиции, где я рисую стрелку.Поэтому я «проверил элемент» из браузера, чтобы проверить HTML-код, и обнаружил, что ТОЛЬКО первый <div id = "desc"> из первого тега ngFor li изменялся при наведении мыши.

Я не знаю, почему это происходит, иevent.target.getBoundingClientRect () должен предоставить мне текущую позицию одного элемента, но это не похоже на это.

Есть предложения по решению этой проблемы?