<%- include("partials/header") %>
<p> this is main page</p>
<% let cpp= 6 %>
<% for (let i=0;i<cpp;i++){ %>
<div class="card">
<li><%= cards[i].name %></li>
<li><%= cards[i].price %></li>
<li><%= cards[i].title %></li>
<li><%= cards[i].inStore %></li>
<li><%= cards[i].code %></li>
</div>
<% } %>
<div>button id="next">load more</button></div>
<%- include("partials/footer") %>
how I can change let cpp=6 to cpp=12 on clicking button id="next"
The array cards must come from the res.render statement in your Javascript file, because there is no let cards.
res.render("ejsfile", {cards: [...]});
So the solution is to put the cpp integer there as well and omit the let cpp = 6 statement:
res.render("ejsfile", {
cards: [...],
cpp: Number(req.query.cpp) || 6 // default value
});
Then the first 6 entries would be available at http://server/mainpage?cpp=6 (and also at http://server/mainpage, because 6 is the default value). And the "next" button must link to http://server/mainpage?cpp=12.
See the documentation for req.query.