How to manipulate specific div inside a for-loop of EJS? - for-loop

Question

Been googling around for multiple hours, I want to change the color of the svg of one element during the onClick event, turns out it either style all the elements in the for loop, or just the first one. I added my ejs and toggleSvg() js script here. Hope you can help me.
ejs snippet:
(look for "svg here")
<div class="max-w-5xl mt-14 mx-auto sm:max">
<% posts.forEach(post=> { %>
<div class="my-20">
<div class=" px-2 mb-2 flex items-center justify-between">
<div class="flex items-center">
<div class="border border-gray-300 p-1 rounded-full w-10 h-10 flex items-center bg-white">
<img
src="<%= post.merchant.image %>"
alt="..."
class="w-10"
loading="lazy"
/>
</div>
<p class="pl-5"><%= post.merchant.name %></p>
</div>
<div>
<!--svg here!-->
<svg id="test" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" onclick="toggleSvg()" >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
</div>
</div>
<!--image carousell-->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide w-10 h-20 bg-black ">
<div class="justify-center flex ">
<img
src="<%= post.imageUrl[0] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[1] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[2] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
<div class="swiper-slide bg-black">
<div class="justify-center flex bg-black">
<img
src="<%= post.imageUrl[3] %>"
alt="..."
class="h-72"
loading="lazy"
/>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="">
<p><span class="font-bold pr-3"><%= post.merchant.name %></span><%= post.description %></p>
</div>
</div>
<% }) %>
</div>`enter code here`
toggleSvg() js:
<script>
function toggleSvg() {
svgElem = document.getElementById("test");
if(svgElem.style.fill === 'red'){
svgElem.style.fill = 'none';
}else{
svgElem.style.fill = 'red';
}
}
</script>

Answer 1

you're using a id in a loop
the can only select one element, if you want to color all svg you can use a class, if you want to color a specific svg you can do it like this
onclick="toggleSvg(this)"
this way you pass the current element when you click
<script>
function toggleSvg(svgElem ) {
if(svgElem.style.fill === 'red'){
svgElem.style.fill = 'none';
}else{
svgElem.style.fill = 'red';
}
}
</script>