I am building an application with Express that uses the ejs template system. I have a form that contains an input that is built dynamically with the tags variable, in addition, there is a button to add a new Tag, that uses AJAX to do so.

app.ts

app.get('/', async (req: Request, res: Response) => {
  const tags = await TagController.getAllTags();
  res.render('index', { tags });
});

index.ejs

<% tags.forEach((t)=>{ %>
  <div class="tag is-dark">
      <%= t.name %>
  </div>
<% }); %>
<button id="add-tag">Add a new tag!</button>

The problem is that I want this to be added without adding something like location.reload() as the page load is quite large, it worsens the user experience and I should implement a system to manage the state of the form.

I understand that I can do it through Javascript, since I have an endpoint that returns all the tags, but that would lead me to rebuild parts of the interface and stop using the ejs template system.

Is there any way for the injected variable to be reloaded without reloading the page? Or is completely static and the only way to modify it is by the reload?