Tengo un problema, lo que quiero que haga es que cuando haga un click en una imagen de una flecha se levante una sección en una card. El código funciona pero no levanta una sola si no que levanta todas a la vez.
JS
const weather = document.querySelectorAll(".open-weathers");
const clickOpenMoreInf = function (e){
const wrapWeathers = document.querySelectorAll(".weathers");
wrapWeathers.forEach( contInf =>{
contInf.style.transform="translateY(-175px)";
})
}
weather.forEach(boton =>{
boton.addEventListener("click", clickOpenMoreInf);
})
HTML
<div class="card">
<div class="card-wrap-info">
<p class="parrafo-country-city">Cancún, MX</p>
<img class="img2"src="http://openweathermap.org/img/wn/03d.png">
<p class="actual-temp2"></p>
<p class="card-parrafo-max2">Temperatura maxíma 31.01°C</p>
<p class="card-parrafo-min2">Temperatura minima 26.41°C</p>
<div class="weathers">
<img class="open-weathers" src="./icons/sort-down-solid.svg">
<p class="temp-day2">31.01</p>
<p class="temp-morn2">26.41</p>
<p class="temp-night2">27.27</p>
</div>
</div>
</div>
Lo que esta en rojo es lo que se tiene que levantar, pero al hacer click en la flecha se levantan todas