title: Toggling class in group of buttons
body: <p>I have the following markup for a group of buttons:</p>
  
  <pre><code>&lt;div class="btn-group pull-right"&gt;
      &lt;button type="button" class="btn btn-default" id="today"&gt;Today&lt;/button&gt;
      &lt;button type="button" class="btn btn-default" id="this_week"&gt;This Week&lt;/button&gt;
      &lt;button type="button" class="btn btn-default" id="this_month"&gt;This Month&lt;/button&gt;
      &lt;button type="button" class="btn btn-default" id="custom"&gt;Custom&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to replace class <code>btn-default</code> with class <code>btn-primary</code> on the button using jQuery so that when clicked, the clicked button will have the following <code>class="btn btn-primary"</code>, and any other button in the group with class <code>btn-primary</code> will toggle back to <code>btn-default</code>.</p>
  
  <p>Is there a more elegant solution to what I have provided below? Do I have to write a function for every button? Also, I risk adding btn <code>btn-default</code> to a button which already has that class. Any help is greatly appreciated.</p>
  
  <pre><code>$("#today").click(function () {
      $(this).parent().find("btn btn-primary").removeClass("btn btn-primary");
      $(this).parent().addClass("btn btn-default");
      $(this).addClass("btn btn-primary");
  });
  </code></pre>