Javascript - 单击不同按钮时单击具有类或 id 的多个元素

Question

我想单击一个按钮，同时单击其他按钮或每个按钮之间有延迟。这些附加按钮共享相同的类，并且它们的 id 以相同的命名法开头。我知道我可以使用 jQuery 轻松完成此操作，但我想让它与 Vanilla Javascript 一起使用。

我尝试使用 querySelector，但这只会触发第一个元素。另外，我找到了另一个为每个按钮设置超时的解决方案，问题是当窗口加载时会触发它，当我单击另一个按钮时需要它工作。

这是我的 html 代码：

<div>

  <button class="bundle-product-button" id="button1" onClick="alert('click button1');">Button 1</button>

  <button class="bundle-product-button" id="button2" onClick="alert('click button2');">Button 2</button>

  <button class="bundle-product-button" id="button3" onClick="alert('click button3');">Button 3</button>

</div>

<button class="add-bundle-to-cart">Trigger</button>

这只会触发第一个按钮：

function testOne() {

    document.querySelector(".bundle-product-button").click();

}

document.querySelector(".add-bundle-to-cart").onclick = testOne;

这在窗口加载时触发：

var clickcallback = function(i) {

  setTimeout(function() {

    let id = "button" + i;

    document.getElementById(id).click();

  }, 1000); // one second

  if(i <= 3) {

    clickcallback(i+1);

  }

};

clickcallback(1);

我知道这可能很简单，但是如何在单击一个元素时触发多次单击。