How do I get an animate.css class to apply to all chat bot replies (written in Rivescript) using jQuery?

Question

I have written a chatbot script using rivescript and I have integrated a chatbox into my site. When the user inputs text, I want the bot's response text to 'fadeInUp' onto the screen. The javascript i've written works for the initial bot reply (after the page has been refreshed) but when I type another input it appears on screen as normal (just appears without fading in). Here's my code so far -

HTML

<!-- AI output -->
<div id="ai-out">
    <p id="ai-output"></p>
</div>

<!-- User input -->
<div id="ai-in">
    <input id="user_input"></input>
    <button id="submit"> > </button>
</div>

JS

let button = select('#submit');
let userinput = select('#user_input');
let aioutput = select('#ai-output');

button.mousePressed(chat);

function chat() {
    let input = userinput.value();
    let reply = bot.reply("local-user", input);
    aioutput.html(reply);
    $('#ai-output').addClass('animated fadeInUp');
}