Hello i wanna make a function what show an explanation to only one div all the time but it shows me any div can you help me please? Using VueJs

This is my function

showInfo() {
            const explanDiv = document.querySelectorAll('.explan-div')
            explanDiv.forEach(div  => {
                div.classList.toggle('opacity-scale')
                console.log('Hello')
            })
        },

and the HTML Code

<div v-if="!isPlayerVisible">
                <div class="grid grid-cols-1 auto-rows-[minmax(0,_150px)] w-11/12  mx-auto rounded-lg justify-center items-center">
                    <div class="hover-div relative text-white cursor-pointer mx-auto" v-for="(season, index) in seasons" v-bind:key="season.id">
                        <div v-on:click="playSong(index)" :style="{
                        backgroundImage: `url('/uploads/thumbnail/${season.thumbnail}')`,
                        width: '150px',
                        height: '100px',
                        backgroundSize: 'cover',
                        backgroundPosition: 'center',
                        borderRadius: '10px',
                        zIndex: '1',
                        }">
                        </div>
                            <div class="info-icon" v-on:click="showInfo">
                                <InfoIcon></InfoIcon>
                            </div>
                        <div class="explan-div opacity-scale">
                            <p class="text-center pt-2 text-[10px]">{{season.name}}</p>
                            <div class="p-2">
                                <p>Beschreibung:</p>
                                <p>{{season.description}}</p>
                            </div>
                        </div>
                    </div>
                </div>

I already tryed it with an Id binding but than it was totally destroyed and nothing worked do you know some efficent ways to do that? Thanks for any kind of help