Bootstrap Collapse：一次只有一个面板（可能是jQuery库问题）

I am trying to implement Bootstrap collapsible panels on my website, but something isn't working properly. My intention is to change the default WooCommerce tabs to collapsing panels/accordions. Here is the code I used to override WooCommerce's tabs.php file:

<?php
/**
* Single Product tabs
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

/**
* Filter tabs and allow third parties to add their own
*
* Each tab is an array containing title, callback and priority.
* @see woocommerce_default_product_tabs()
*/
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if (!empty($tabs)):
?>

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

  <?php foreach ( $tabs as $key => $tab ) : ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse-<?php echo $key ?>" class="collapsed">
          <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?>
        </a>
      </h4>
    </div>
    <div id="collapse-<?php echo $key ?>" class="panel-collapse collapse">
      <div class="panel-body">
        <?php call_user_func( $tab['callback'], $key, $tab ) ?>
      </div>
    </div>
  </div>

  <?php endforeach; ?>

</div>

<?php 
endif;
?>
</div><!-- .summary -->

The panels are working well, the only exception being that I cannot have just one panel open at a time. If I try toggling a second panel, the others don't collapse as they should. I have successfully implemented the panels before, but now something clearly is off.

I suspect it might be related to the jQuery library as it is not included anywhere at this point. I tried using both <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> and <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> but to no avail.

Fiddle: link (please note: I have removed the PHP code and inserted some dummy text for the panel title and content. In my case, I will have just 2 panels, not 3).

Any advice?

Update: Here's the outputted HTML: https://jsfiddle.net/e2vc545g/ (I cannot add the entire HTML code of the webpage as it exceeds 3,000 characters)