Как изменить идентификатор атрибута при нажатии кнопки

Question

В настоящее время я пишу приложение Chrome (не путать с расширением. Да, приложения Chrome все еще существуют [только на Chromebook]).В любом случае, мне нужно изменить идентификатор круга, который изменит анимацию CSS на зеленую точку вместо красной точки.Вот мой код:

HTML (до):

<div class="circle" id="redcircle"></div></td>
<button type="button" id="clickme">Unlock</button></td>

HTML (мне нужно, чтобы он выглядел так, когда я нажимаю кнопку):

 <div class="circle" id="greencircle"></div></td>
    <button type="button" id="clickme">Unlock</button></td>

CSS:

#redcircle {
  height: 15px;
  width: 15px;
  background-color: #00FF00;
  border-radius: 50%;
  animation-name: Fade01;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  margin-left: 10px;
}
#greencircle {
  height: 15px;
  width: 15px;
  background-color: #00FF00;
  border-radius: 50%;
  animation-name: Fade02;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  margin-left: 10px;
}
@keyframes Fade01 {
    0% {background-color: #FFFFFF;}
    50% {background-color: #FF0000;}
    100% {background-color: #FFFFFF;}
}
@keyframes Fade02 {
    0% {background-color: #FFFFFF;}
    50% {background-color: #00FF00;}
    100% {background-color: #FFFFFF;}
}

Спасибо!