jQuery Mobileでコラプシブルを動的に追加することができます。
ボタンにid属性を指定し、jsでclick時に追加するようにして実装します。

<script type="text/javascript">
$(document).on("pagecreate",function() {
  var nextId = 1;
  $("#add").click(function() {
    nextId++;
    var content = "<div data-role='collapsible' id='set" + nextId + "'><h4>テスト" + 
    nextId + "</h4><p>テストです</p></div>";// 1行で書いてください
    $( "#set" ).append( content ).collapsibleset( "refresh" );
  });
});
</script>

コラプシブルのDEMOです。

コラプシブル内にフォーム部品があるとします。これをそのまま追加すると、UIが崩れてしまいます。

<script type="text/javascript">
$(document).on("pagecreate",function() {
  var nextId = 1;
  $("#add").click(function() {
    nextId++;
    var content = "<div data-role='collapsible' data-collapsed='true'><h4>サンプルサイト1</h4><label for='switch'" + 
    nextId + ">トグル</label><select id='switch" + nextId + "' data-role='slider' data-theme='a' data-track-theme='a'>
    <option value='1'>男性</option><option value='2'>女性</option></select></div>";// 1行で書いてください
    $( "#set" ).append( content ).collapsibleset( "refresh" );
  });
});
</script>

// 中略

<div data-role="content">
  <button type="button" data-mini="true" data-inline="true" id="add">追加</button>
  <div data-role="collapsible-set" data-content-theme="a" id="set">
    <div data-role="collapsible" data-collapsed="true">
      <h4>サンプルサイト1</h4>
      <label for="switch">トグル</label><select id="switch" data-role="slider" data-theme="a" 
      data-track-theme="a"><option value="1">男性</option><option value="2">女性</option></select>
    </div>
  </div>
</div>

以下、コラプシブルのフォーム部品が崩れるDEMOです。