アコーディオン　クリックで＋をーにするには

Bootstrapを使ってアコーディオンを作っているのですが、質問の後のspanタグの中の＋をクリックイベントでーに変えるにはどのようにすれば良いのでしょうか？
jquelyを使うといいと言われたのですが、どこに記述すればいいのか又は新しくファイルを作成した方がいいのか教えて頂けると助かります。

Html
1コード
2```<!doctype html>
3<html lang="ja">
4  <head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <!-- Fontawesome -->
9    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10    <!-- Bootstrap CSS -->
11    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12    <link rel="stylesheet" href="style.css">
13    <title>Hello, world!</title>
14
15  </head>
16
17  <body>
18    
19        <!-- Landing page -->
20<main id="contact">
21    <div class="main-img align-items-center">
22        <img src="img/bg-2.jpg" alt=""class="d-block mx-auto">
23        <div class="main-title text-center">
24            <h1>AFS-1000</h1>
25            <h2>よくある質問</h2>
26        </div>
27    </div>
28</main>
29        <!-- End Landing page -->
30<section>    
31    <div class="panel-heading">
32        <h4 class="panel-title bg-primary text-white text-center">検査に関して
33        </h4>
34    </div>
35</section>
36    <div class="accordion" id="accordion-4">
37        <div class="card">
38          <div class="card-header" id="header-4a">
39            <button class="btn btn-link text-decoration-none mb-0 " type="button"
40                data-toggle="collapse" data-target="#card-4a"
41                aria-expanded="true" aria-controls="card-4a">
42                <p><span>Q.</span>検査結果が出るまでの所要時間「8分」は適正なのでしょうか？<span>+</span></p>
43            </button>
44          </div>
45          <div id="card-4a" class="collapse"
46              aria-labelledby="header-4a" data-parent="#accordion-4">
47            <div class="card-body">
48                <p><span>A.</span>Covid-19の検査結果に関する国際基準が設定されていないため、それぞれのメーカーが研究を重ね、的確な結果が出るように機器を設計しています。本機器については手順通りの時間（8分）で測ることをお勧めします。</p>
49            </div>
50          </div>
51        </div>
52        <div class="card">
53          <div class="card-header" id="header-4b">
54            <button class="btn btn-link text-decoration-none mb-0" type="button"
55                data-toggle="collapse" data-target="#card-4b"
56                aria-expanded="false" aria-controls="card-4b">
57                <p><span>Q.</span>IgM,IgGの基準の単位T/Cとはなんでしょうか？<span>+</span></p>
58            </button>
59          </div>
60          <div id="card-4b" class="collapse"
61              aria-labelledby="header-4b" data-parent="#accordion-4">
62            <div class="card-body">
63                <p><span>A.</span>Target/Control. Tは感染、Cは非感染の免疫グロブリンを表します。</p>
64            </div>
65          </div>
66        </div>
67        <div class="card">
68          <div class="card-header" id="header-4c">
69            <button class="btn btn-link text-decoration-none mb-0" type="button"
70                data-toggle="collapse" data-target="#card-4c"
71                aria-expanded="false" aria-controls="card-4c">
72                <p><span>Q.</span>蛍光抗体検査機器の精度はどのくらいでしょうか？<span>+</span></p>
73            </button>
74          </div>
75          <div id="card-4c" class="collapse"
76              aria-labelledby="header-4c" data-parent="#accordion-4">
77            <div class="card-body">
78                <p><span>A.</span>95%以上の精度となっています。</p>
79            </div>
80          </div>
81        </div>
82        <div class="card">
83          <div class="card-header" id="header-4d">
84            <button class="btn btn-link text-decoration-none mb-0" type="button"
85                data-toggle="collapse" data-target="#card-4d"
86                aria-expanded="false" aria-controls="card-4d">
87                <p><span>Q.</span>基準値（カットオフ）について、イタリアとその他の国がなぜ違うのでしょうか？<span>+</span></p>
88            </button>
89          </div>
90          <div id="card-4d" class="collapse"
91              aria-labelledby="header-4d" data-parent="#accordion-4">
92            <div class="card-body">
93                <p><span>A.</span>コロナに対するIgG IgM の世界的な基準となるカットオフは定められておりません。イタリアは自国民とコロナウィルスの関連性に関して研究が進んでおり、イタリアに住んでいる民族に対して的確と考えうる基準値が決められています。</p>
94            </div>
95          </div>
96        </div>
97      </div>
98    <div class="panel-heading">
99        <h4 class="panel-title bg-primary text-white text-center">検査に関して
100        </h4>
101    </div>
102
103    <div class="accordion" id="collapse-accordion">
104        <div class="card mb-2">
105          <div class="card-header" id="headingOne">
106            <h5 class="mb-0">
107              <button class="btn btn-link btn-block text-center text-decoration-none" type="button" data-toggle="collapse" data-target="#collapse-accordion-1">
108                <p><span>Q.</span>IgM値が0.00となるのはなぜでしょうか？<span>+</span></p>
109              </button>
110            </h5>
111          </div>
112          <div id="collapse-accordion-1" class="collapse" data-parent="#collapse-accordion">
113            <div class="card-body">
114                <p><span>A.</span>その時点でIgMが確認できない程小さな値だった際に0.00を示します。</p>
115            </div>
116          </div>
117        </div>
118        <div class="card mb-2">
119          <div class="card-header" id="headingOne">
120            <h5 class="mb-0">
121              <button class="btn btn-link btn-block text-center text-decoration-none" type="button" data-toggle="collapse" data-target="#collapse-accordion-2">
122                <p><span>Q.</span>基準値（IgM:1.3、IgG:1.2）を少し超えた場合のどのような対応をすればよいでしょうか？<span>+</span></p>
123              </button>
124            </h5>
125          </div>
126          <div id="collapse-accordion-2" class="collapse" data-parent="#collapse-accordion">
127            <div class="card-body">
128                <p><span>A.</span>カットオフ値を若干上回った陽性という結果となるため、再テストをお勧めいたします。</p>
129            </div>
130          </div>
131        </div>
132      </div>
133    <footer>
134        <div class="contact">
135        <h5 class="text-center">ご不明点がございましたら
136            メールにてお問合せください。</h5>
137        </div>  
138        <div class="contact contact-btn text-center">
139            <a href="mailto:faq@medex-lab.com" class="btn btn-danger">お問合せ</a>
140        </div>  
141    </footer>
142
143
144    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
145<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
146<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
147
148</body>
149</html>
150  
151```CSS
152コード
153```body {
154    font-family: 'Lato', sans-serif;
155    color: #505962;
156  }
157
158  input[type=button] + #clicked::after {
159    content: "-";
160  }
161/* contact */
162#contact{
163    width: 100%;
164}
165.main-img{
166    background-color: rgb(224, 222, 253);
167    position: relative;
168}
169.main-img img{
170    width: 70%;
171    height: 70%;
172    opacity: .7;
173}
174.main-title{
175    position: absolute;
176    top: 45%;
177    right: 0;
178    left: 0;
179    bottom: 0;
180    margin: auto;
181    color: rgb(27, 27, 29);
182    text-shadow: 1px 0px 0px darkslateblue;
183}
184.main-title h1{
185    letter-spacing: 0.5rem;
186}
187.main-title h2{
188    letter-spacing: 0.3rem;
189}
190/* panel */
191.panel-title{
192    padding-left: 20px;
193    padding: 10px;
194}
195.panel-heading{
196    margin-top: 60px;
197}
198/* card */
199.card{
200    text-align: center;
201}
202.accordion{
203    margin-top: 20px;
204}
205.card-header p{
206    color: #505962;
207}
208.card-header span{
209    color: rgb(16, 78, 211);
210    margin: 0 20px;
211}
212.card-header p:hover{
213    color: rgb(16, 78, 211);
214}
215.card-body span{
216    color: rgb(219, 43, 79);
217    margin: 0 20px;
218}
219footer{
220    margin-top: 50px;
221}
222
223/* contact */
224.contact{
225    margin-top: 40px;
226}
227.contact-btn{
228    margin-bottom: 100px;
229}
230
231footer{
232    margin-bottom: 100px;
233}
234/* media */
235
236@media (max-width: 992px) {
237
238}
239
240@media (max-width: 768px){
241
242}
243
244@media (max-width: 576px) {
245    .panel-heading{
246        margin-top: 20px;
247    }
248    .main-title h1{
249        font-size: 24px;
250    }
251    .main-title h2{
252        font-size: 18px;
253    }
254    .contact{
255        bottom: 30px;
256    }
257}