Toggle class with JS - Only change the actual position

Question

I have a problem with my code... I want to show a specific FA icon when I press a button and different when I press it again. (Attach pic.):

But when I press the button, the changes are made to all the buttons... I think that the problem is in the for, but I don't have an idea how to solve it.

   <script>
          function MostrarObra(){
            var Icon = document.getElementsByTagName('i');
            
              for (i = 0; i < Icon.length; i++) {
                Icon[i].classList.toggle('fa-angle-double-down');
                Icon[i].classList.toggle('fa-angle-double-up');
              }
            };
</script>


  <div class="card-header p-0" id="headingTwo">
      <button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          <span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
      </button>
  </div>

Answer 1

When you call document.getElementsByTagName('i') you get all elements i in the document. That's why all buttons change.

You could pass the button that is triggering the event to your function and start looking for the i element from it.

    <script>
    function MostrarObra(element) {
        const icon = element.querySelector('i');
        icon.classList.toggle('fa-angle-double-down');
        icon.classList.toggle('fa-angle-double-up');
    }
    </script>

    [...]

    <button onclick="MostrarObra(this)">[...]</button>