title: add or remove class on click with data- attribute
body: <p>Simple jquery click toggle function here, though due to my limited knowledge and experience I'm in need of some direction. </p>
  
  <p>I have a set of buttons with a shared <code>boxedBgSwitch</code> class that each have have a uniquie <code>data-id</code>. I'd like to assign the <code>data-id</code> as a class to the <code>body</code> of my document on click, and only one class should be assigned at a time. The below code works for assigning the classes, but it doesn't remove the previously added classes before adding the new one. What is the recommended way to do this?</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  $('.boxedBgSwitch').on('click', function(e){
      e.preventDefault();
      var bgClass = $(this).data("id");
      $('body').toggleClass(bgClass);
    });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;button data-id="bg-blue" class="boxedBgSwitch color-box"&gt;&lt;/button&gt;
    &lt;button data-id="bg-yellow" class="boxedBgSwitch color-box"&gt;&lt;/button&gt;
    &lt;button data-id="bg-red" class="boxedBgSwitch color-box"&gt;&lt;/button&gt;
    &lt;button data-id="bg-orange" class="boxedBgSwitch color-box"&gt;&lt;/button&gt;
    &lt;button data-id="bg-green" class="boxedBgSwitch color-box"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Obviously, I'm new to jQuery... seems there should be an <code>addOrRemoveClass</code> method for this very purpose. Perhaps there's an equivalent? </p>