How do i toggle rotation on svg images in Bootstrap 4 Accordion card on click?

I have a svg arrow image within each header of my Bootstrap 4 accordion card. I want the header I open's arrow to rotate 180 degrees while it is open and to toggle back to it's initial state if I close it or open another header. Right now the arrows only rotate while i'm holding down the click then return back to the initial state as soon as I release the mouse. Any help?

CSS

.arrow:active {
          
        -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
         
}

HTML

<div class="card">
      <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite? 
        </button>
          <img src="images/icon-arrow-down.svg" class="arrow" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         You can invite up to 2 additional users on the Free plan. There is no limit on 
  team members for the Premium plan.
      </div>
    </div>
  </div>

Javascript

    $('.arrow').click(function() {
    $(this).toggleClass('active');
});
       

Since you're using the down (open) arrow as the initial state, you'll want to set any initially closed accordion arrows to collapsed, and then use this CSS to flip the image up (open) when the accordion sections are opened.

.arrow:not(.collapsed) {
    transform: rotateX(180deg);
}

Demo