JS Функции с PHP mysqli_fetch_asso c echo

Question

У меня есть PHP эхо, где я показываю результаты запроса выбора с mysqli_fetch_asso c и эхо *, только часть эха находится ниже *. Но я хочу, чтобы функция переключения страницы запускалась при щелчке одного из svg с идентификатором переключения. Однако, поскольку я повторяю массив результатов, работает только первое эхо результата, остальные нет, потому что все идентификаторы одинаковы. Как сделать так, чтобы функция работала с каждым эхом результата. Спасибо

HTML / PHP:

echo'
    <svg id="toggle" onclick="togglepage()" class="hover-box-menu2 toggle-page" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 15L12.5 10L7.5 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    ';

JS:

function togglepage() {
    if (document.getElementById("toggle").style.transform == "rotate(0deg)" || document.getElementById("toggle").style.transform == "") {
        document.getElementById("toggle").style.transform = "rotate(90deg)";
    }
    else if (document.getElementById("toggle").style.transform == "rotate(90deg)") {
        document.getElementById("toggle").style.transform = "";
    }
}

Answer 1

Вот другой подход:

Прежде всего, мы пишем некий JS, который выполняет следующие функции

1. Выбирает все элементы SVG на странице
2. L oop с помощью этих элементов, добавляющих прослушиватель событий 'click' добавьте к нему свойство преобразования.

   Теперь, когда вы щелкаете SVG, он будет вращаться между 90 и 0 градусами.

   document.querySelectorAll('.rotateable').forEach(el => {
     el.addEventListener('click', () => {
       el.classList.toggle('rotate')
     })
   })

   .rotate {
     transform: rotate(90deg);
     /* more styles here */
   }

   <svg class="rotateable hover-box-menu2" width="40" height="40" viewBox="0 0 20 20" fill="black" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L12.5 10L7.5 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
   <svg class="rotateable hover-box-menu2" width="40" height="40" viewBox="0 0 20 20" fill="black" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L12.5 10L7.5 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
   <svg class="rotateable hover-box-menu2" width="40" height="40" viewBox="0 0 20 20" fill="black" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L12.5 10L7.5 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>