I have two buttons with the same id but the difference is they have a unique data command, issue is the first button is clicking fine but the 2nd button is not responding.

        <li><button class="py-1 btn" id="command-btn" data-username=${
          view.attributes.nick
        } data-command="kick">Kick</button></li>

                <li><button class="py-1 btn" id="command-btn" data-username=${
          view.attributes.nick
        } data-command="ban">Ban</button></li>
                </ul>
              </div>
              `,
        );
      document
        .querySelector(`[data-msgid="${view.id}"] #command-btn`)
        ?.addEventListener('click', (event: any) => {
          const username = event.target.dataset.username;
          const command = event.target.dataset.command;
          console.log(username, command);

          const textarea: any = document.querySelector('.chat-textarea');
          const submitBtn: any = document.querySelector('.btn.send-button');
          textarea.value = `/${command} ${username}`;
          submitBtn.click();
        });

[data-msgid="${view.id}"] this means every div has a unique id, from that unique id I am getting the exact clicked button,