How do I define a state jquery/javascript?

 $(document).on("click", '.gifyImage', function(event) {
    var clickedImage = $(event.target);
    if(clickedImage.data('state') === "animate") {
        //set to still
        clickedImage.data('state', "still");
        // update state clickedImage.data('state', 'animate');
        clickedImage.data('state', "animate");
    } else {
        //set to animate
        clickedImage.data('state', "animate");
        //update state to still
        clickedImage.data('state', "still");
    }
    clickedImage.attr('src', clickedImage.data('still'));
    console.log(event.target);
});

Backstory to why i'm writing this function.. I have a assignment that requires me to have the gif image still and when clicked on the gif it will start to play (animate), and when i click it again it will go back to being still. This code here is giving me a error : "State is not defined"