Using Javascript functions with a button in Handlebars

I have a handlebars project with the following structure:

Project
 |
 +-- server.js
 +-- package.json
 +-- package-lock.json
 |    
 +-- public
 |  |  
 |  |-- css
 |      |
 |      + -- style.css
 |
 +-- views
 |  |  
 |  |-- layouts
 |  |   |
 |  |   + -- main.handlebars
 |  +-- index.handlebars

In my server.js file, I created the app to run on localhost:3000, as well as serve the index.handlebars at /. I understand how to grab information from an api, so just to learn how to navigate displaying data from an API in a handlebars application, I created a GetInsult(); function to retrieve a random insult from an API I found online (purely for learning purposes). I grab the data with the function, and then pass the data to the res.render() function. You can see how this works in my server.js file:

//import modules
import dotenv from 'dotenv';
dotenv.config();

import http from 'http';
import path from 'path';
import { dirname } from 'path';
import express from 'express';
import { engine } from 'express-handlebars';
import axios from 'axios';


//other variables
const port = process.env.PORT;
const hostname = process.env.HOSTNAME;
const __dirname = path.resolve();

//store data in variable
var insult = await GetInsult();


const app = express();

//Create http server to run and listen on localhost:3000
var server = http.createServer(app).listen(port, hostname, () => {
    console.log(`Server is running at http://${hostname}:${port}`);
})

app.engine('handlebars', engine());
app.set('view engine', 'handlebars')
app.set('views', './views')

//Use Static Files
app.use('/public', express.static(__dirname + '/public'));
app.use('/css', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css')));
app.use('/js', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/js')));
app.use('/js', express.static(path.join(__dirname, 'node_modules/jquery')));

app.get('/', (req, res) => {
    res.render('index' , {insult})
});



export async function GetInsult() {
    var response = await axios('https://insult.mattbas.org/api/insult')
    var data = response.data
    return data
}

console.log(insult)

Then in my index.handlebars file, I can successfully display the insult like so:

<main>
    <div style="text-align: center;">
        <h1 id="insult">{{insult}}</h1>
        <button id="insult-button" class="btn btn-dark">Get New Insult</button>
    </div>
</main>

I’m having trouble figuring out how to add the GetInsult(); functionality to the button I have underneath the <h1>{{insult}}</h1> tags. I’ve tried numerous ways and feel like I’m missing something simple. I would like the button to execute the GetInsult(); function and display the new insult that is retrieved from the API. I’m not sure if I need to house the function elsewhere and call it from another file, or if it’s even possible with an asynchronous function. Any guidance would be appreciated. Thank you!