Nested shortcoder short codes issue

I am testing out the plugin and what I am trying to do it use it to add shortcodes for use with bootstrap elements.

In this case I wanted to start with making a shortcode for an accordion. Since there could be a varied number of collapsible elements I made two short codes, one for the wrapper and one for each panel.

However it seems to not work properly. Code below.
Here is an image of how the code is rendering on the frontend.

View post on imgur.com

[sc name="accordion-wrapper" ][sc name="accordion-panel-content" panelcode="cg1" paneltitle="Collapsible Group 1"]Content here.[/sc][/sc]

Short Code 1
<div class="panel-group" id="accordion">$$enclosed_content$$</div>

Short Code 2

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#%%panelcode%%">%%paneltitle%%</a>
    </h4>
  </div>
  <div id="%%panelcode%%" class="panel-collapse collapse">
  	<div class="panel-body">$$enclosed_content$$</div>
  </div>
</div>