Currently, I am delving into my very first React project.

In my project, I have implemented an onClick event for one of the elements, which happens to be a button. The aim is to smoothly transition an image's opacity to 0 to indicate that the user has successfully added an input. The keyframe setup for this transition is as follows:

#showTick {
    width: 30%;
    opacity: 0;
}

.activateKF {
    animation: showTick 0.7s;
}

@keyframes showTick {
    0% {opacity: 0;}
    25% {opacity: 0.5;}
    50% {opacity: 1;}
    75% {opacity: 0.5;}
    100% {opacity: 0;}
}

The default styling for the showtick element is what I've defined. When the button is clicked, I want to add the .activateKF class to the #showTick element using the following code:

goalCreation=()=>{
    document.getElementById("showTick").classList.remove("activateKF"); 
    let goal = document.getElementById("enterGoal").value;
    if (goal.length < 1){
        return false;
    } else {
        document.getElementById("showTick").classList.add("activateKF");            
        this.props.submitGoal(goal);
    }
}

My intention is to remove the class within the same function so that the keyframe can be re-added to the element every time the button is clicked to trigger the animation. However, I'm facing an issue where this only works the first time. Even after removing the line that removes the class, it still only works once. I'm struggling to understand why.

I would greatly appreciate some assistance so that the keyframe becomes active every time the button is clicked.

Update: I have also provided the code for the actual React component that I'm working on as part of this question.

import React, { Component } from 'react';
import '../Styles/creategoal.css';
import specificGoal from '../Images/specificgoal.png';
import cost from '../Images/cost.png';
import tick from '../Images/greentick.jpg';
import '../Styles/creategoal.css';
import '../App.css';

export default class CreateGoal extends Component {
    constructor(props){
        super(props);
        this.state = {
            showCostDiv: false,
            showSpecificDiv: false
        }
    }

    goalCreation=()=>{
        let goal = document.getElementById("enterGoal").value;
        if (goal.length < 1){
            return false;
        } else {
            document.getElementById("showTick").classList.add("activateKF");            
            this.props.submitGoal(goal);
        }
    }

    closeHelp=(e)=>{
        let currentClicked = e.target.tagName;
        if (this.state.showCostDiv && currentClicked !== "SECTION"){
            this.setState({
                showCostDiv: false
            })
        if (this.state.showSpecificDiv && currentClicked !== "SECTION"){
            this.setState({
                showSpecificDiv: false
            })
        }
        }
    }

    openSpecificWindow=()=>{
        this.setState({
            showSpecificDiv: true
        })
    }

    closeSpecificWindow=()=>{
        this.setState({
            showSpecificDiv: false
        })
    }

    openCostWindow=()=>{
        this.setState({
            showCostDiv: true
        })
    }

    closeCostWindow=()=>{
        this.setState({
            showCostDiv: false
        })
    }

    render(){

        let specificDivStatus = "hideContent";
        let costDivStatus = "hideContent";

        if (this.state.showSpecificDiv){
            specificDivStatus = "showContent";
        }

        if (this.state.showCostDiv){
            costDivStatus = "showContent";
        }

        return (
        <div onClick={this.closeHelp} className="createGoal">

            <div id="banner" className="goalSetBanner">
                <h1>SET YOUR GOAL</h1>
            </div>
            <span className="goalTip">Consider the following when setting your goal:</span>

            <section id="BeSpecificHelp" className={specificDivStatus}>
                <p>Describe exactly what your goal is, and when its possible use numbers to make it measurable. This excercise will turn your idea or dream
                even closer to reality.</p>
                <br/>
                <p>Examples:</p>

                <p><span className="incorrect">Wrong:</span> Weight loss.<br/>
                <span className="correct">Right:</span> Losing 8Kg.</p>

                <p><span className="incorrect">Wrong:</span> Read more books.<br/>
                <span className="correct">Right:</span> Read a new book every 15 days.</p>

                <p><span className="incorrect">Wrong:</span> Buying a house.<br/>
                <span className="correct">Right:</span> Buying a house within two bedrooms in a given address.</p>

                <span id="closeWindowSpecific" onClick={this.closeSpecificWindow}>Close</span>              
            </section>

            <section id="considerCostHelp" className={costDivStatus}>
                <p>Do not focus only on the result you will get.</p>
                <p><strong>Your time and energy are limited resources</strong></p>

                <p>Reflect on what it will take you to achieve this goal.</p> 

                <p>Finish completing it if you are willing to pay the price.</p>

                <span id="closeWindowCost" onClick={this.closeCostWindow}>Close</span>              
            </section>

            <main className="setGoalInfo">
                <div id="beSpecificGoal" className="considerGoal">
                    <img src={specificGoal} alt="Specific Goal" />
                    <span className="goalHelp">Be as specific as possible</span>
                    <span id="beSpecificLink" onClick={this.openSpecificWindow} className="link-span">TAP FOR MORE INFO</span>
                </div>
                <div id="considerCost" className="considerGoal">
                    <img src={cost} alt="Cost of Goal" />
                    <span className="goalHelp">What will it cost you?</span>
                    <span id="considerCost" onClick={this.openCostWindow} className="link-span">TAP FOR MORE INFO</span>
                </div>
            </main>

            <div id="goalAdded">
                <img src={tick} id="showTick" alt="Goal Added" />
            </div>

            <div className="inputDiv">
                <input type="text" id="enterGoal" placeholder="What is your goal?"></input>
            </div>

            <button onClick={this.goalCreation} id="createGoal">CREATE MY GOAL</button>

        </div>
            )
    }
}

Thank you for any assistance provided.