'Toggle class for one element when accordion is pressed

I'm currently making a QA page using Jquery UI accordion. Right now I managed to make several accordion but the problem is, I need to (+) part turns to (-) when the accordion is pressed, and the jquery I made make all the (+) button turns at the same time whenever I pressed an accordion button.

How can I make the button turn according to when it's corresponding accordion is collapsed ?

Here is my simplified code

$(function() {
  $("#accordion").accordion({
    collapsible: true
  });
});

$(function() {
  $('.qa_accordion_button').click(function() {
    $('.button_outer').toggleClass('pressed');
    $(this).removeClass('pressed');
  });
});
.button_outer {
  color: #ecf0f1;
  background: #e74c3c;
  width: 40px;
  height: 40px;
  border: 0;
  font-size: 1.5em;
  position: relative;
  border-radius: 2rem;
}

.button_outer .minus {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

.button_outer .minus:first-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

.button_outer .minus:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
  transform: rotate(90deg);
}

.pressed .minus {
  transform: rotate(180deg);
}

.pressed .minus:last-child {
  left: 50%;
  right: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<div id="accordion">
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 1</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 1</p>
    </div>
  </div>
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 2</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 2</p>
    </div>
  </div>
</div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source