お詳し方がおられましたらどうかご教授頂けませんでしょうか。

スマートフォンサイトの詳細ページのサブエリアのサブテキストの直下に、（商品情報）をトグルボタンで表示できるように設定したいと考えております。サブエリアですので、サブ情報が増えた分だけ（異なる商品情報）表示される仕組みになっておりますが、それをどのように記述すればよいか思案しております。

例えば以下の例で‘情報を表示’を#sub_area1と設定し、サブエリアが３つ表示されたとすると、一番目のサブエリアで‘情報を表示’ボタンをタッチするとサブエリア1の商品情報を表示しますが、二番目、三番目のサブエリアで‘情報を表示’ボタンをタッチすると一番目のサブエリアの商品情報を開いてしまいます。

<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>

<div class="title_box_sub clearfix">
<h1><span class="b_expand"><p onclick="fnSubToggle($('#sub_area1'), this);">情報を表示</p></span></h1>
</div>

<div id="sub_area1" style="display: none;">
<p>商品情報</p>
<!--{assign var=ckey value="sub_product_info`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$ckey] != ""}-->
</div>

これをどの様に記述すれば、サブエリア2、サブエリア3で設定した‘商品情報’を表示できるようになるかご教授いただけませんでしょうか。（#sub_area1と設定しているので2番目、三番目のサブエリアの‘情報を表示’ボタンをタッチした時に、#sub_area1の‘商品情報’を表示してしまうのはわかりますが、#sub_area1という記述自体をどう変更すれば、サブエリア2、サブエリア3でそれぞれの‘商品情報’を表示できるかと思案にくれております。）

[EC-CUBE]2.12.5
[OS]Linux
[PHP]5.3.13
[データベース]MySQL 5.0.67
[WEBサーバ]Apache