Динамическая переменная и содержимое ejs

у меня есть список проектов, каждый из которых имеет один тег:

проект 1 : тег : дом

проект 2 : тэг : квартира

...

И я хочу иметь возможность отображать только проекты, которые включают один выбранный тег

Если я поставлю тег, он работает:

<% if (project.tags.includes('Appartements')) { %>
    <h2 class = "project-title"><%= project.title %></h2>
<%}%>

Но я хочу использовать кнопку, чтобы изменить этот тег:

<button onclick = "changeSelectedTag('Appartements')">Appartements </button>
<button onclick = "changeSelectedTag('Maisons')">Maisons </button>


<script type = "text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.info(selectedTag)
    }
</script>

Журнал консоли работает, я вижу, что selectedTag обновляется каждый раз, когда я нажимаю кнопку. но я поставил этот код, у меня 0 проектов и selectedTag пуст:

<% if (project.tags.includes(selectedTag)) { %>

Полный код:

<div class = "body-content">
    <div class = "body-tags">
        <%selectedTag = 'Appartements'%> 
        <button onclick = "changeSelectedTag('Appartements')">Appartements</button>
        <button onclick = "changeSelectedTag('Maisons')">Maisons</button>
    </div>
    <div class = "projects-container">
        <% projects.forEach((project) => { %>

        <% if (project.tags.includes(selectedTag)) { %>
            <div class = "projects-content">
                <h2 class = "project-title"><%= project.title %></h2>
            </div>
            <%}%>
        <% }); %>
    </div>
</div>

<script type = "text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.info(selectedTag)
    }
</script>

RENDER в моем контроллере

exports.list = (req, res) => Project.find((err, projects) => {
  if (err) return next(err);
  let selectedTag;
  return res.render('../templates/projects.ejs', { projects: projects, selectedTag: selectedTag });
});

СОДЕРЖАНИЕ, которое я хочу отобразить:

<div id = "here" class = "items-container">
                <% projects.forEach((project) => { %>
                <%selectedTag = 'Appartements'%>
                <% if (project.tags.includes(selectedTag)) { %>
                    <div class = "items-content">
                        <img onmouseover = "onProjectHover('<%=project.id%>-img', '<%=project.id%>-titles')"  class = "item-img" src = "/<%=project.images.main.url%>" alt = "<%=project.images.main.alt%>">
                        <div onmouseleave = "onProjectLeave('<%=project.id%>-img', '<%=project.id%>-titles')" id = "<%=project.id%>-img" class = "item-hover-content">
                            <div class = "item-hover-content-title">Surface : <span class = "item-hover-content-value"><%=project.surface%> m2</span></div>
                            <div class = "item-hover-content-title">Budget : <span class = "item-hover-content-value"><%=project.budgect%></span></div>
                            <div class = "item-hover-content-title">Durée : <span class = "item-hover-content-value"><%=project.duration%> mois</span></div>
                            <button class = "item-hover-content-btn"><a href = "<%=project.slug%>">Voir le projet <i class = "fas fa-arrow-right"></i></a></button>
                        </div>
                        <div id = "<%=project.id%>-titles" class = "item-titles">
                            <h2 class = "item-title"><%= project.title %></h2>
                            <p class = "item-city"><%= project.cities %></p>
                        </div>

                    </div>
                    <%}%>
                <% }); %>
            </div>