title: Buttons that run a specific sequence of events (verbose code that I don't know how to simplify)
body: <p>My code is working, but it's incredibly verbose and I know that it can be made more compact. I just don't know how :-)</p>
  
  <p>I'm building an audio portfolio. When a button is clicked, a sequence of events happens. When another button is clicked, all other active buttons are killed and the sequence for that specific button runs.</p>
  
  <p>The buttons are invisible and are placed on a visualisation of a switch. When clicked, an image of the switch flicked into its "activated" state has its class of "display: none" removed. That should give the user the impression that actually flicking a switch starts playing audio.</p>
  
  <p>Like so:</p>
  
  <pre><code>$(function(){
  
    // FIRST BUTTON
    $('.button01').click(function() {
      if ($('.switch01').hasClass('activated')){
  
      // So if button.button01 is clicked and img.switch01 has class "activated"
  
        // Kill all audio
        $('audio').each(function(){ this.pause(); this.currentTime = 0; });
  
        // Turn this switch off
        $('.switch01').removeClass('activated');
  
        // Kill all info cards showing the playback controls
        $('.audio-info-card').addClass('d-none');
      } else { 
  
  
      // If button.button01 is clicked and img.switch01 DOESN'T have class "activated"
  
        // Turn all other switches off
        $('.switch02, .switch03').removeClass('activated');
  
        // Kill all info cards
        $('.audio-info-card').addClass('d-none');
  
        // Activate this switch and info card
        $('.switch01').addClass('activated');
        $('.audio-info-card#card01').removeClass('d-none');
  
        // Kill all audio
        $('audio').each(function(){ this.pause(); this.currentTime = 0; });
  
        // Start this audio
        $('#audio01-player')[0].play();
      }
    });
  
    // SECOND BUTTON
    $('.button02').click(function() {
      if ($('.switch02').hasClass('activated')){ 
  
      // So if button.button02 is clicked and img.switch02 has class "activated"
  
        // Kill all audio
        $('audio').each(function(){ this.pause(); this.currentTime = 0; });
  
        // Turn this switch off
        $('.switch02').removeClass('activated');
  
        // Kill all info card showing the playback controls
        $('.audio-info-card').addClass('d-none');
      } else { 
  
  
      // If button.button02 is clicked and img.switch02 DOESN'T have class "activated"
  
        // Turn all other switches off
        $('.switch01, .switch03').removeClass('activated');
  
        // Kill all info cards
        $('.audio-info-card').addClass('d-none');
  
        // Activate this switch and info card
        $('.switch02').addClass('activated');
        $('.audio-info-card#card02').removeClass('d-none');
  
        // Kill all audio
        $('audio').each(function(){ this.pause(); this.currentTime = 0; });
  
        // Start this audio
        $('#audio02-player')[0].play();
      }
    });
  </code></pre>
  
  <p>There are 16 buttons. I realize this code is stupid but JS / jQuery isn't my strong suit :-D</p>
  
  <p>Fortunately, the code works, but any help making this simpler would be greatly appreciated!</p>