title: Using multiple bootstrap buttongroups in one page
body: <p>Let's say I would like to have 2 different button groups on my page.</p>
  
  <pre><code>&lt;div class="btn-group fruits" role="group" aria-label="fruits" id="fruits"&gt;
      &lt;button type="button" name="fruits" class="btn btn-default"&gt;apple&lt;/button&gt;
      &lt;button type="button" name="fruits" class="btn btn-default"&gt;cherry&lt;/button&gt;
      &lt;button type="button" name="fruits" class="btn btn-default"&gt;melon&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="btn-group vegetables" role="group" aria-label="vegetables" id="vegetables"&gt;
      &lt;button type="button" name="vegetables" class="btn btn-default"&gt;cucumber&lt;/button&gt;
      &lt;button type="button" name="vegetables" class="btn btn-default"&gt;aubergine&lt;/button&gt;
      &lt;button type="button" name="vegetables" class="btn btn-default"&gt;pepper&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Whenever I click on a button, the selected button on other group became deselected.</p>
  
  <p>I have added, different "ids", "names", "classes" to each buttongroup and button. But unfortunately no success. How can I have multiple buttongroups on a page without affecting eachother? </p>
  
  <p>All the examples on official bootstrap page are even like that. When you click on o buttongroup, other buttongroup deselected. <a href="http://getbootstrap.com/components/#btn-groups" rel="nofollow noreferrer" title="Bootstrap Button Group">Bootstrap Button Group</a></p>
  
  <p>Thanks for any idea.</p>