Continuous Changing of Class Name does not giving expected output

Question

Hello Guys Here I'm trying to change the color my my light using css animation.The method I have used is that add/remove the animation class using js. It's working fine when choose one different button .but it's not working when clicking same button twice.How to fix that?

function getElement(k){
    var elm = document.getElementById(k);
    return elm;
}

function OnLight(j){ 
    getElement("light" + j).classList.add('buttonAnim');
}

function resetLight(){
    for(let  k=1 ; k<=3 ; k++){
        if ( getElement("light" + k).classList.contains('buttonAnim') ){
            getElement("light" + k).classList.remove('buttonAnim');
        }
    }
}

for(let i=1 ; i<=3 ; i++){    
getElement("button" + i).addEventListener("click",function(){
    resetLight();        
    OnLight(i);
            
                                                     });
}

li{
 list-style:none;
}
 
.light {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #611114;
    box-shadow: inset 0px 0px 5px 1px #000;
 }
 
.buttonAnim {
  -webkit-animation-name: lightChanger;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes lightChanger {
    0% {background-color: #611114;}
    40% { background-color: #da0d17;}
    60% { background-color: #da0d17;}
    100% {background-color: #611114;}
}

<li>
  <button id="button1" class="button">button1</button>
  <div id="light1" class="light"></div>
</li>
<li>
  <button id="button2" class="button">button2</button>
  <div id="light2" class="light"></div>
</li>
<li>
  <button id="button3" class="button">button3</button>
  <div id="light3" class="light"></div>
</li>

Answer 1

As your animation is based on class, so you need to recall the class to make animation again on same button click, Here i have updated your js code:

function getElement(k){
    var elm = document.getElementById(k);
    return elm;
}

function OnLight(j){ 
		getElement("light" + j).classList.remove('buttonAnim');
    setTimeout(function(){
    getElement("light" + j).classList.add('buttonAnim');
    },10);
}

function resetLight(){
    for(let  k=1 ; k<=3 ; k++){
        if ( getElement("light" + k).classList.contains('buttonAnim') ){
            getElement("light" + k).classList.remove('buttonAnim');
        }
    }
}

for(let i=1 ; i<=3 ; i++){    
getElement("button" + i).addEventListener("click",function(){
    resetLight();        
    OnLight(i);
            
                                                     });
}

li{
 list-style:none;
}
 
.light {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #611114;
    box-shadow: inset 0px 0px 5px 1px #000;
 }
 
.buttonAnim {
  -webkit-animation-name: lightChanger;
  -webkit-animation-duration:5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes lightChanger {
    0% {background-color: #611114;}
    40% { background-color: #da0d17;}
    60% { background-color: #da0d17;}
    100% {background-color: #611114;}
}

<li>
  <button id="button1" class="button">button1</button>
  <div id="light1" class="light"></div>
</li>
<li>
  <button id="button2" class="button">button2</button>
  <div id="light2" class="light"></div>
</li>
<li>
  <button id="button3" class="button">button3</button>
  <div id="light3" class="light"></div>
</li>

Hope this will help you.