Я пытаюсь изменить стиль текста с помощью кнопок, но не могу заставить его работать для нескольких с одним и тем же иден ⇐ CSS

[Anonymous]

Я пытаюсь создать кнопку, которая могла бы добавлять и удалять стили для определенных частей моего веб-сайта, в данном случае меняя цвет фона элементов.
Хотя кнопки работают нормально, когда это один элемент, когда у меня есть два, например. «Один» и «Третий», кнопка влияет только на первый, а не на все элементы с одинаковым идентификатором.
Надеюсь, я объяснил это, ок я новичок в программировании, и это мой первый веб-сайт, поэтому, пожалуйста, будьте добры, хахахаха
Make Blue
Make Pink

thing One
thing Two
thing three


.blue { font-family: Helvetica;
font-size: 18px;
color: #ffffff;
background-color:#003eff;
}

.pink { font-family: Helvetica;
font-size: 18px;
color: #ffffff;
background-color:#eb00ff;
}

.body { font-family: Helvetica;
font-size: 18px;
color: #000000;
background-color:#ffffff;
}



var blue = document.getElementById('blue');
function changeBlue() {
 for(var i = 0; i < blue.classList.length; i++) {
   if(blue.classList.indexOf('body') >= 0) {
     blue.classList.remove('body');
     blue.classList.add('blue');
   } else {
      blue.classList.remove('blue');
     blue.classList.add('body');
    }
 }
}

var pink = document.getElementById('pink');
function changePink() {
 for(var i = 0; i < pink.classList.length; i++) {
   if(pink.classList.indexOf('body') >= 0) {
     pink.classList.remove('body');
     pink.classList.add('pink');
   } else {
      pink.classList.remove('pink');
     pink.classList.add('body');
    }
 }
}



Подробнее здесь: https://stackoverflow.com/questions/784 ... o-work-for