Jquery restarts animation after button click

Question

I have some jQuery lines:

$(document).on('click', '#clicked', function(e){
    e.preventDefault();
    $(".speech").css("animation-play-state", "running");
});

// Change text on click and reset animation
// 
$(document).on('click', '#clicked2', function(e){
    e.preventDefault();
    $('.speech').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('I AM A WOOKIE!!', 'YOU CLICKED!')); 
    });
    setTimeout(function(){
        var redo= $('.speech');
        $("." + redo.attr(".speech") + ":last").remove();  
        // $(".speech").remove();  
        $(".speech").css("animation-play-state", "paused");
    }, 2000);
});

How it works is that when you click #clicked, the animation plays.

Then, by clicking # clicked2, it will then change the line with I AM A WOOKIE !! CLICK TO YOU !!

What I then try to achieve after the timeout function is then reset back to the beginning of the original animation. So basically the reset button, but I'm not sure how to get there.

Matching lines:

setTimeout(function(){
    var redo= $('.speech');
    $("." + redo.attr(".speech") + ":last").remove();  
    // $(".speech").remove();  
    $(".speech").css("animation-play-state", "paused");
}, 2000);

Everything else works as it should. I'm just not sure of the correct syntax to reset my animation, so when you click #clicked again, it basically starts from the beginning

https://jsfiddle.net/uLg99tsw/8/

Answer 1

animation-play-state. transitions? add/remove CSS .

Answer 2

anim, :

.anim {
  animation: talking 2s forwards;
}

$(document).on('click', '#clicked', function(e) {
  e.preventDefault();
  $(".speech").text("I AM A WOOKIE!!").toggleClass("anim");
});

$(document).on('click', '#clicked2', function(e) {
  e.preventDefault();
  $(".speech").text("YOU CLICKED!");
});

JSFiddle