我在下載前有一個帶有幾秒鐘計時器的下載按鈕，但不幸的是，它僅適用于第一個按鈕，而不適用于其他按鈕。我希望它能夠在每個下載按鈕上正常工作，但我不知道如何解決這個問題。請幫忙！我附上了我一直在使用的 CSS、HTML 和 JavaScript。document.getElementById("download_button").addEventListener("click", function(event) {  event.preventDefault();  var timeleft = 3;  var downloadTimer = setInterval(function function1() {    document.getElementById('download').style.display = "none";    document.getElementById("timer").innerHTML = "Wait " + timeleft + "";    if (timeleft <= 0) {      clearInterval(downloadTimer);      document.getElementById("timer").innerHTML = ""      window.open(document.querySelector('#downloadbutton a').href, '_blank');      document.getElementById('download').style.display = "";    }    timeleft -= 1;  }, 1000);});.container {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  text-align: center;}#download_button {  border: none;  margin-top: 0px;  padding: 10px;  width: 200px;  font-family: "montserrat", sans-serif;  text-transform: uppercase;  border-radius: 6px;  cursor: pointer;  color: #fff;  font-size: 16px;  transition: 0.4s;  line-height: 28px;  outline: none;}.button-1 {  background: #f12711;}.button-2 {  background: #0575E6;}.button-3 {  background: #fe8c00;}#download_button:hover {  background: #000000;}.title {  font-weight: bold;}<div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-1">          <div class="title">Document Title 1</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div><br><div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-2">          <div class="title">Document Title 2</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div>