如何在点击后分别改变每个图标的颜色？

<div class="icon" id="icon1"></div>
<div class="icon" id="icon2"></div>
<div class="icon" id="icon3"></div>

.icon {
  color: #000000; /* 默认颜色 */
}

.icon.active {
  color: #ff0000; /* 点击后的颜色 */
}

var icons = document.getElementsByClassName('icon');

for (var i = 0; i < icons.length; i++) {
  icons[i].addEventListener('click', function() {
    // 移除所有图标元素的active类
    for (var j = 0; j < icons.length; j++) {
      icons[j].classList.remove('active');
    }
    
    // 为当前点击的图标元素添加active类
    this.classList.add('active');
  });
}