How to show follow/buttons in ejs - node.js

Question

Im trying to make a user profile page where a user can follow another user.
my routes are fine
but then i wanted to ask is if a user clicks on follow. Only the unfollow button will be shown. if i unfollow the follow button will be shown.
these are my codes
router.get('/follow/:id', isLoggedIn, async function(req, res, next) {
try {
const user = await User.findById(req.params.id);
if (!user) {
req.flash("error", "User does not exist");
res.redirect('back')
return res.status(404).json({ error: 'User does not exist' });
}
if (user.followers.indexOf(req.user.id) !== -1) {
req.flash("error",`You're already following ${user.local.username}` )
res.redirect('back')
return res.status(400).json({ error: `You're already following
${user.local.username}` });
}
user.followers.addToSet(req.user.id);
await user.save();
const users = await User.findById(req.user.id);
users.following.addToSet(user.id);
await users.save();
req.flash("success", "User added")
return res.redirect('back')
} catch (err) {
return next(err);
}
});
router.delete('/follow/:id', isLoggedIn, async function(req, res) {
try {
const user = await User.findById(req.params.id);
if (!user) {
return res.status(404).json({ error: 'User not found' });
}
const following = user.followers.indexOf(req.user.id);
if (following === -1) {
return res.status(400).json({ error: `You're not following
${user.username}` });
}
user.followers.splice(following, 1);
await user.save();
const userLogged = await User.findById(req.user.id);
const positionUnfollow = userLogged.following.indexOf(user.id);
userLogged.following.splice(positionUnfollow, 1);
await userLogged.save();
req.flash('success', `You have sucessfully unfollowed
${user.local.username || user.facebook.name}`)
return res.redirect("back");
} catch (err) {
return next(err);
}
});
my ejs page
<div class="follow justify-content-center">
<% user.followers.forEach(function(follower) { %>
<% if(currentUser && currentUser._id.equals(follower.id)) { %>
<form id="delete-btn" action="/users/follow/<%= user.id%>?
_method=DELETE" method="POST">
<button class="btn btn-danger"><i class="fas fa-user-slash">
</i></button>
</form>
<% } %>
<% }) %>
</div>
<% user.following.forEach(function(follow) { %>
<% if(currentUser && follow._id !== user._id) {%>
<a href="/users/follow/<%= user.id %>"><button class="btn btn-
primary">
<i class="fas fa-user-plus"></i></button></a>
<% } %>
<% }) %>
<div class="card-footer text-center">
<div class="social-media">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
my user schema
followers: [
{
type: mongoose.Schema.ObjectId, ref: 'User'
}
],
following: [
{ type: mongoose.Schema.ObjectId, ref: 'User'
}
],
the problem now is if i follow a user the unfollow button will appear but the follow button won't go away.
also if i did a <%=user._id%> and <%=follow.id%> the values are the same but not sure why the environment variables didn't work.