My click triggered lottie animations stop animating after a few click events

Question

I am working on a tic-tac-toe game where a token is dynamically placed by clicking on a square on the board (a button). When this happens, the token appears as a lottie animation. I edited the lottie animation settings in photoshop so that the gif only plays once after each click, instead of infinitely looping.

This issue is, the first few clicks work as intended. But eventually the animations don't play after being triggered - they just appear as static. Is this a problem with my code?

Javascript:

    //adds token to UI
    function placeToken(square) {
        var box = square.id;
        var token = GameController.getActivePlayer().token;
        var boxNumber = Number(box.charAt(box.length-1));
        validMove = GameController.validityCheck(boxNumber);
        if (validMove) {
            if (token === "X") {
                square.innerHTML = "<img src='X-animation.gif' class='animation'/> ";
                GameController.game(boxNumber);
            } else {
                square.innerHTML = "<img src='O-animation.gif' class='animation'/> ";
                GameController.game(boxNumber);
            }
        };
    };

HTML:

    <button id="resetBttn">Reset</button>
    <div id="gameboard">
        <button class=box id="box-0"></button>
        <button class=box id="box-1"></button>
        <button class=box id="box-2"></button>
        <button class=box id="box-3"></button>
        <button class=box id="box-4"></button>
        <button class=box id="box-5"></button>
        <button class=box id="box-6"></button>
        <button class=box id="box-7"></button>
        <button class=box id="box-8"></button>
    </div>

I've tested to see if closing the live server would reset the animation, but it doesn't.