Есть коллекция элементов, надо применить стили по клик на иконку к тому div на который кликаю

У меня есть одинаковых 8 дивов на странице. Мне надо сделать так, чтобы по клику на иконку (круговая стрелка) карточка поворачивалась. Я реализовала это с помощью переключателя классов. Но беда в том, что я смогла найти решение только поставив слушатель событий на всю карточку. А мне надо, чтобы слушатель событий стоял только на иконке. При этом чтобы переключатель классов срабатывал только на том блоке, на котором срабатывает клик по иконке. Вот что у меня есть на данный момент.

<div class="card style-element" style="width: 18rem;">
                        <div class="front">
                            <img src="./img/foto.png" class="card-img-top img-style" alt="#">
                            <div class="card-body">
                                <input class="card-text" placeholder="&#9998">
                                <button class="btn-card-text">ok</button>
                                <p class="out-front">яблоко</p>
                                <div class="img-position">
                                    <img src="./img/down.png" alt="#">
                                    <img src="./img/repost.png" alt="#">
                                    <img src="./img/delete.png" alt="#">
                                    <img src="./img/arrow.png" alt="#" class="arrow_card">
                                </div>
                            </div>
                        </div>
                        <div class="back">
                            <input type="text" class="back-text" placeholder="&#9998">
                            <button class="btn-card-text">ok</button>
                            <p id="out">Тут будет текст который ввели</p>
                            <img src="./img/arrow.png" alt="arrow" class="arrow_card back_arrow">
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card style-element" style="width: 18rem;">
                        <div class="front">
                            <img src="./img/foto.png" class="card-img-top img-style" alt="#">
                            <div class="card-body">
                                <input class="card-text" placeholder="&#9998">
                                <button class="btn-card-text">ok</button>
                                <p class="out-front">ананас</p>
                                <div class="img-position">
                                    <img src="./img/down.png" alt="#">
                                    <img src="./img/repost.png" alt="#">
                                    <img src="./img/delete.png" alt="#">
                                    <img src="./img/arrow.png" alt="#" class="arrow_card">
                                </div>
                            </div>
                        </div>
                        <div class="back">
                            <input type="text" class="back-text" placeholder="&#9998">
                            <button class="btn-card-text">ok</button>
                            <p id="out">Тут будет текст который ввели</p>
                            <img src="./img/arrow.png" alt="arrow" class="arrow_card back_arrow">
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card style-element" style="width: 18rem;">
                        <div class="front">
                            <img src="./img/foto.png" class="card-img-top img-style" alt="#">
                            <div class="card-body">
                                <input class="card-text" placeholder="&#9998">
                                <button class="btn-card-text">ok</button>
                                <p class="out-front">Тут уже ввели название карточки</p>
                                <div class="img-position">
                                    <img src="./img/down.png" alt="#">
                                    <img src="./img/repost.png" alt="#">
                                    <img src="./img/delete.png" alt="#">
                                    <img src="./img/arrow.png" alt="#" class="arrow_card">
                                </div>
                            </div>
                        </div>
                        <div class="back">
                            <input type="text" class="back-text" placeholder="&#9998">
                            <button class="btn-card-text">ok</button>
                            <p id="out">Тут будет текст который ввели</p>
                            <img src="./img/arrow.png" alt="arrow" class="arrow_card back_arrow">
                        </div>
                    </div>
                </div>
            </div>



.front{
    max-width: 100%;
    min-width: 100%;
    height: auto;
   
}
.front, .back{
    backface-visibility: hidden;
        transition: 2s;
}
.back {
    transform: rotateY(180deg);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 42%;
    left: 0;
}

.front_rotate  {
    transform: rotateY(180deg);
}

.back_rotate{
    transform: rotateY(360deg);
}
.img-style{
width: 110px;
height: 110px;
margin: 15px 0 15px 90px;
}
.img-position img{   
    width: 30px;
    height: 30px;
    margin: 5px 15px 5px 15px;
}
.card-text, .back-text{
    width: 84%;
    border: none;
    border-bottom: 1px solid black;
}
.btn-card-text{
    border-radius: 5px;
    border: 1px solid #0d6efd;
    background:#f8f9fa;
}
.back_arrow{
    width: 30px;
    height: 30px;
    float: right;
    margin: 8% 5% 0 0;
}


document.querySelectorAll('.card').forEach(item => item.addEventListener('click', function () {
    item.querySelector('.front').classList.toggle('front_rotate');
    item.querySelector('.back').classList.toggle('back_rotate');

})
);