title: How can I activate multiple buttons on one page using JavaScript/jQuery?
body: <p>I want to build a page where a user can select multiple items by clicking on a button. I already used focus and active classes to make the buttons change appearance but with my current code I can only activate one single button. I'm looking for code that enables a user to activate multiple buttons. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button class="btn btn-1"&gt;
      button 1
  &lt;/button&gt;
  
  &lt;button class="btn btn-1"&gt;
      button 2
  &lt;/button&gt;
  
  &lt;button class="btn btn-1"&gt;
      button 3
  &lt;/button&gt;
  
  &lt;button class="btn btn-1"&gt;
      button 4
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.btn:hover {
    background-color: rgba(52, 152, 219,0.6);
  }
  
  .btn:focus {
    background-color: rgba(52, 152, 219,0.6);
  }
  
  .btn:active, .btn:visited {
    background-color: rgba(52, 152, 219,0.6);
  }
  
  .active {
    background-color: rgba(52, 152, 219,0.6); 
  }
  </code></pre>
  
  <p>This is the jQuery code I have been using to try and add a permanent active class to those buttons that have been clicked. This is not working yet. </p>
  
  <pre><code>$(document).ready(function(){ 
      $('.btn').click(function() { 
          $('.btn').addClass('active');
      });
  });
  </code></pre>