How to reset a CSS animation so that it runs everytime with only Javascript

I've implemented the solution from This thread and it still only runs once.

Code:

    const ButtonClickFunction = (e,id)=>{
    e.preventDefault()
    var el = document.querySelector(`.location-${id}`)

    el.style.animation = '';
    el.style.animation = "addition 1s";

}

From what I can tell, every time I click the button the elements animation is cleared, then set to the animation I want. But still, it only runs once and then never works again. I really hoping to just do this with javascript, as adding a class and then taking it away just seems clunky and not the best practice. I'm using React as a FE framework if that matters

edit:SOLUTION

    var el = document.querySelector(`.location-${id}`)

    el.style.animation = "addition 1s 3";

    el.addEventListener('animationend', ()=>{
        el.style.animation = ""
    })

Like one user stated, the browser will ignore back to back assignments and just optimize to run that final assignment call. To get around this, use the eventlistener to trigger the 'reset' once the animation has ended.

I'm still of the opinion that adding classes, taking away classes,and using a setTimeout to 'reset' the animation is awkward and clunky.This solution is just a few lines of code and doesn't hurt maintainability having to scroll through endless amounts of classes if you have many animations you want your users to trigger.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event