Как привязать вызов меню через ID элемента?

Question

[Aison]

Привет ребят) Нашёл интересное красивое круговое меню.

codepen.io

я планирую применить данное меню к новостям. Как сделать так, чтобы каждое меню вызывалось отдельно для каждой новости?

p.s. Есть тэг, который можно прописать в html и благодаря ему я могу вывести id для каждой новости отдельно) я так понимаю, нужно переделать копать в сторону querySelector

не против готового решения, для сравнения) спасиб



пример.

Answer 1

[Aison]

помог пользователь с другого ресурса. спасибо ему)

var circles = document.querySelectorAll('.circle');

circles.forEach(function(elem){
let items = elem.querySelectorAll('a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
});

var buttons = document.querySelectorAll('.menu-button');
buttons.forEach(function(button){
  button.addEventListener('click', function(e) {
   e.preventDefault();    
   this.parentElement.querySelector('.circle').classList.toggle('open');
  });
});