Handlebars append dynamic content - mysql

Question

How would I go ahead and append data to my existing list of data using Handlebars?
I can call ?page=1 to get the next 10 items presented, but how can I append them to the already existing list?
I already have a function, where I can call some javascript from when the user scrolls to the bottom.
app.get("/", function (req, res) {
let numRows;
const numPerPage = parseInt(req.query.npp, 10) || 10;
const page = parseInt(req.query.page, 10) || 0;
let numPages;
const skip = page * numPerPage;
// Here we compute the LIMIT parameter for MySQL query
const limit = skip + "," + numPerPage;
queryAsync("SELECT count(*) as numRows FROM cars")
.then(function (results) {
numRows = results[0].numRows;
numPages = Math.ceil(numRows / numPerPage);
})
.then(() => queryAsync("SELECT * FROM cars ORDER BY id ASC LIMIT " + limit))
.then(function (results) {
const responsePayload = {
results: results
};
const data = { cars: results };
const template = fs.readFileSync("./index.hbs", "utf8");
const html = handlebars.compile(template)(data);
if (page < numPages) {
responsePayload.pagination = {
current: page,
perPage: numPerPage,
totalPages: numPages,
previous: page > 0 ? page - 1 : undefined,
next: page < numPages - 1 ? page + 1 : undefined
}
}
else responsePayload.pagination = {
err: "queried page " + page + " is >= to maximum page number " + numPages
}
//res.send(responsePayload);
res.send(html);
})
.catch(function (err) {
console.error(err);
res.json({ err: err });
});
});
<div id="cars-wrapper">
<div class="row">
{{#each cars}}
<div class="col s12 m6 l4 xl3">
<div class="car z-depth-1">
<div class="car-header">
<div class="row no-margin">
<div class="col s12 m4 center-align">{{this.id}}</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>