title: Add class to multiple divs depending on click event
body: <p>This is the scenario. My client wants to be able to change the colour theme of the website I'm designing for him.
  I have 4 divs that, when clicked will change the border-colour of another 4 divs. Each click event will change the divs to a different colour depending on which one was clicked.</p>
  
  <p>I thought using some jQuery would solve it but I must be doing something wrong! Here's what I'm trying to run:</p>
  
  <pre><code>$('.btn1').on('click', function(){
      $('.box').removeClass('colour2, colour3, colour4');
      $('.box').addClass('colour1');
  });
  
  $('.btn2').on('click', function(){
      $('.box').removeClass('colour1, colour3, colour4');
      $('.box').addClass('colour2');
  });
  
  $('.btn3').on('click', function(){
      $('.box').removeClass('colour1, colour2, colour4');
      $('.box').addClass('colour3');
  });
  
   $('.btn4').on('click', function(){
      $('.box').removeClass('colour1, colour2, colour4');
      $('.box').addClass('colour4');
  });
  </code></pre>
  
  <p>Any help will be greatly appreciated.</p>