如何使按钮在单击时更改颜色，然后在单击不同按钮时更改回其原始颜色？

<button id="btn1" class="color-btn">按钮1</button>
<button id="btn2" class="color-btn">按钮2</button>
<button id="btn3" class="color-btn">按钮3</button>

.color-btn {
  background-color: #ccc; /* 原始颜色 */
}

.color-btn.clicked {
  background-color: #ff0000; /* 点击后的颜色 */
}

// 获取所有按钮元素
var buttons = document.getElementsByClassName("color-btn");

// 为每个按钮添加点击事件监听器
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // 移除所有按钮的"clicked"类名
    for (var j = 0; j < buttons.length; j++) {
      buttons[j].classList.remove("clicked");
    }
    
    // 将当前点击的按钮添加"clicked"类名
    this.classList.add("clicked");
  });
}