title: Different states for Woocommerce product tabs
body: <p>I recently got tasked with maintaining an old WP site and are having some trouble figuring out how to set the state on a duplicate element. The site uses WooCommerce plugin and in it there are templates which are overridden. One of the templates is called tabs and are essentially a togglable table with additional product information .In this particular app, each product has two tabs. Now the problem is when you click on a tab to open it, its icon changes from a '+' to a '-'. When you do this, the icon on both tabs toggle at the same time. So even though only one tab is opened the other closed tab has a '-'. Sadly, I have never worked with Wordpress or PHP at all, so this is all very archaic for me. This is the template:</p>
  
  <pre><code>&lt;?php
  /**
   * Single Product tabs
   *
   * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
   *
   * HOWEVER, on occasion WooCommerce will need to update template files and you
   * (the theme developer) will need to copy the new files to your theme to
   * maintain compatibility. We try to do this as little as possible, but it does
   * happen. When this occurs the version of the template file will be bumped and
   * the readme will list any important changes.
   *
   * @see     https://docs.woocommerce.com/document/template-structure/
   * @package WooCommerce/Templates
   * @version 2.4.0
   */
  
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }
  
  /**
   * 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 ) ) : ?&gt;
  
      &lt;div class="woocommerce-tabs wc-tabs-wrapper container"&gt;
          &lt;div class="accordion" role="tablist" id="product-accordion"&gt;
              &lt;div class="accordion-item"&gt;
                  &lt;?php foreach ( $tabs as $key =&gt; $tab ) : ?&gt;
                      &lt;div class="border-bottom border-dark pb-1 pt-3 my-4 &lt;?php echo esc_attr( $key ); ?&gt;_tab" id="tab-title-&lt;?php echo esc_attr( $key ); ?&gt;" role="tab" aria-controls="tab-&lt;?php echo esc_attr( $key ); ?&gt;"&gt;
                          &lt;a class="h5 text-uppercase" data-toggle="collapse"  href="#collapse-&lt;?php echo esc_attr( $key ); ?&gt;"&gt;
                              &lt;?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?&gt;
  
                              &lt;span class="handle float-right handle--collapsed"&gt;&lt;i class="icon icon-plus"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;span class="handle float-right handle--open"&gt;&lt;i class="icon icon-minus"&gt;&lt;/i&gt;&lt;/span&gt;    
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="collapse" id="collapse-&lt;?php echo esc_attr( $key ); ?&gt;" role="tabpanel" aria-labelledby="tab-title-&lt;?php echo esc_attr( $key ); ?&gt;" data-parent="#product-accordion"&gt;
                          &lt;?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?&gt;
                      &lt;/div&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;?php endif; ?&gt;
  </code></pre>