title: Why does my "e.target" only work on the first item?
body: <p>I have an accordion bootstrap component in one of my designs. I have added a down carot from font awesome and when the accordion expands I want to add a class of "rotate" to that carot so it points up. Then when the accordion collapse, I want the carot to point down again. The code works on the first down carot but not on the rest of them. How can I make it so the class will apply to whichever one the user clicks on?</p>
  
  <p>Here is the HTML</p>
  
  <pre><code>        &lt;div class="accordion my-5" id="accordionExample"&gt;
            &lt;div class="card" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
              &lt;div class="card-header d-flex" id="headingOne"&gt;
                &lt;h2 class="mb-0"&gt;
                  &lt;button class="btn" type="button"&gt;
                    question 1
                  &lt;/button&gt;
                &lt;/h2&gt;
                &lt;i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"&gt;
                &lt;div class="card-body"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna. 
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
              &lt;div class="card-header d-flex" id="headingTwo"&gt;
                &lt;h2 class="mb-0"&gt;
                  &lt;button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
                    question 2
                  &lt;/button&gt;
                &lt;/h2&gt;
                &lt;i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"&gt;
                &lt;div class="card-body"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
              &lt;div class="card-header d-flex" id="headingThree"&gt;
                &lt;h2 class="mb-0"&gt;
                  &lt;button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
                    question 3
                  &lt;/button&gt;
                &lt;/h2&gt;
                &lt;i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"&gt;
                &lt;div class="card-body"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
              &lt;div class="card-header d-flex" id="headingFour"&gt;
                &lt;h2 class="mb-0"&gt;
                  &lt;button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
                    question 4
                  &lt;/button&gt;
                &lt;/h2&gt;
                &lt;i class="fas fa-caret-down" style="margin-left:auto; padding:12px 10px 0 0;"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"&gt;
                &lt;div class="card-body"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id tellus urna.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>var carotDown = document.querySelector('.fa-caret-down');
  
  carotDown.addEventListener('click', function(e){
    e.target.classList.toggle('rotate');
  });
  
  </code></pre>