title: Bootstrap 4 change icon in collapse
body: <p>I use bootstrap 4 alpha 6 version. In my page I have several collapse blocks. I want to change icon when user open/close that block. As I have several of these blocks I used class but it didnt work. Whats wrong I did? P.S. When I use id in JS works fine, but as you see I have several collapse block and dont want to "copy &amp; paste".</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
           &lt;div class="d-flex align-items-center justify-content-between"&gt;
                &lt;button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects"&gt;
                      &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;
           &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-block"&gt;
          &lt;div class="collapse" id="collapse-projects"&gt;
             ***SOME CONTENT***
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="card"&gt;
      &lt;div class="card-header"&gt;
           &lt;div class="d-flex align-items-center justify-content-between"&gt;
                &lt;button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks"&gt;
                      &lt;i class="fa fa-eye" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;
           &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-block"&gt;
          &lt;div class="collapse" id="collapse-tasks"&gt;
             ***SOME CONTENT***
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready(function () {
              $('.collapse')
                  .on('shown.bs.collapse', function() {
                      $(this)
                          .parent()
                          .find(".fa-eye")
                          .removeClass("fa-eye")
                          .addClass("fa-eye-slash");
                  })
                  .on('hidden.bs.collapse', function() {
                      $(this)
                          .parent()
                          .find(".fa-eye-slash")
                          .removeClass("fa-eye-slash")
                          .addClass("fa-eye");
                  });
          });
  </code></pre>