Как отрабатывать события в скрипте JS при нажатие на кнопки выведенных шаблонизатором EJS?

На страницу выводиться кнопки с id взятым из базы данных <p id="<%=params[i].id_cadet%>" class="cadet"><%= params[i].Lastname %></p>. При нажатие на кнопку должен появляться уникальный блок:

<div class="menu-edit" id="<%=params[i].id_cadet%>menu">
     <p><%= params[i].Firstname %> <%= params[i].Lastname %></p>
</div>

Я написал в JS скрипт который получает id нажатой кнопки. Но уникальный блок появляется после второго клика. Вопрос состоит в том как сделать появление этого блока с одного клика?

Скрипт:

let elementsId;
document.querySelector('#hm1').addEventListener('click', function(e){
   elementsId = e.target.id;
   console.log(elementsId);
   document.getElementById(e.target.id).addEventListener('click', ()=>{
       let s = e.target.id+"menu";
       console.log(s);
       document.getElementById(e.target.id+"menu").style.display = 'block';
   });
});

EJS:

<div class="menu-group">
            <div class="hidden-menu" id="hm1">
                <% for(var i=0; i<params.length;i++) {%>
                    <p id="<%=params[i].id_cadet%>" class="cadet"><%= params[i].Lastname %>  1</p>
                <%}%>
            </div>
            <% for(var i=0; i<params.length;i++) {%>
            <div class="menu-edit" id="<%=params[i].id_cadet%>menu">
                <p><%= params[i].Firstname %> <%= params[i].Lastname %></p>
            </div>
            <%}%>
</div>