Javascript-форум - Событие срабатывает по всем найденным классам документа, как исправить?

Кто может подсказать как решить задачу:

Есть несколько div-блоков с одинаковыми классами. нужно чтобы по клику срабатывал только блок в котором происходит клик.
Вот пример:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<meta charset="UTF-8">

</head>
<body>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>



<script>
$('.trigger').click(function() {
   $('.aaa').toggle();
   $('.bbb').toggle();
});
</script>



<style>
.block-x {
    display: inline-block;
}
a.trigger {
    display: block;
    text-align: center;
    cursor: grab;
}
.bbb {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    background: #39efef;
}

.aaa {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    background: #39ef58;
}
</style>


</body></html>