I have multiple dropdowns that I want when clicking on one dropdown its caret be up instead of down and all its dropdowns siblings caret be down

<div>
<div><i class="fa-solid fa-caret-down toggle"></i></div>
<div><i class="fa-solid fa-caret-down toggle"></i></div>
<div><i class="fa-solid fa-caret-down toggle"></i></div>
<div><i class="fa-solid fa-caret-down toggle"></i></div>
</div>

this is my code

//tabs arrows up-down classes
let toggleButton = document.querySelector('.small-tab-container');
let toggle = document.querySelector('.toggle');

function toggleCaret() {
  toggle.classList.toggle('fa-caret-down');
  toggle.classList.toggle('fa-caret-up');
}
toggleButton.addEventListener('click', toggleCaret, false);

of course this code working only on first caret because I didn't loop throw siblings. I need to know:

1- how to loop on them?

2- how to make one of the carets are up all other carets are down?

I need to achieve this using pure javascript