Tengo varios menús desplegables que quiero cuando hago clic en un menú desplegable, su intercalación está arriba en lugar de abajo y todos sus hermanos desplegables deben estar abajo

 <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>

este es mi codigo

 //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);

por supuesto, este código funciona solo en el primer signo de intercalación porque no hice un bucle con los hermanos. Necesito saber:

1- ¿cómo hacer un bucle sobre ellos?

2- ¿Cómo hacer que uno de los símbolos de intercalación esté arriba y todos los demás símbolos de intercalación estén abajo?

Necesito lograr esto usando javascript puro