Twitter-bootstrap collapse plugin - how to enable multiple "groups" to be opened?

Just don't use data-parent attributes:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/

For a solution that expands/collapses each panel dependently and allows multiple accordions on each page.

If all your accordions and groups have unique ids then you can have as many accordions on the page as you want

Each accordion needs a unique id:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

Each heading needs a unique id

<div class="panel-heading" role="tab" id="headingOne">  

Each body needs a unique id, and if applicable a reference the the heading to be used

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

Example on JSFiddle: http://jsfiddle.net/qnhd7Lu3/3/

$('#multipleOPened').on('click', function() {
  if($(this).is(':checked')) {
    $('#accordion .collapse').removeAttr('data-parent');
  } else {
    $('#accordion .collapse').attr('data-parent','#accordion');
  }
});

An example with bootstrap 4 on JSFiddle : https://jsfiddle.net/tw1j7Lf3/7/