Javascript 在可折叠的标题上放置复选框并存储ID信息

我正在使用HTML5和jquery mobile制作一个应用程序。我有1个页面，通过ajax从服务器获取输入，并以以下格式显示在可折叠下拉菜单上：

Collapsible tab title1
Id: 1
Account: 1
Amount: 500

Collapsible tab title2
Id: 2
Account: 2
Amount: 500

and so on. 

我想在这个标签标题上有一个复选框，勾选后，它将把id的值存储在一个变量中

例如：

Collapsible tab title1 checkbox ticked. (for this title1, id is 1)
var identity = 1; (store 1 in a variable)

在页面底部有一个确认按钮。单击该按钮后，此信息将发送到url www.awebsite.com/id=1

除了这一部分，我已经完成了应用程序的每一部分。我需要两方面的帮助

1.如何在可折叠选项卡标题中添加复选框

2.选中复选框后，如何将ID信息存储在变量中

我已经解决了将变量信息发送到url的部分。有人能帮我做这两个部分吗。我试着查找教程，但信息是分开的，它们讨论如何创建可折叠集或如何创建复选框。也没有找到任何通过复选框存储信息的示例

以下是页面的代码和从服务器获取信息的代码。谢谢

html

未付帐单

剧本

$.getJSON("http://mywebsite.com/public/user/listunpaidbills/",function(data){
            //Loop for each element on the data
            $.each(data,function(elem){
                var wrap = $("<div/>").attr('data-role', 'collapsible');
                //Create the h1 and the other elements appending them to bills List
                $("<h1/>",{
                    text:data[elem].reference //this is the title
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"ID: "+ data[elem].id
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"Account: "+ data[elem].account
                }).appendTo(wrap);        
                $("<p/>",{
                    text:"Amount: "+ data[elem].amount
                }).appendTo(wrap);
                wrap.appendTo('#unpaidList');    
            })//end of for each loop
            $( "#unpaidList" ).collapsibleset( "refresh" );
        })

$.getJSON（“http://mywebsite.com/public/user/listunpaidbills/，函数（数据）{
//数据上每个元素的循环
$。每个（数据、功能（元素）{
var wrap=$（“”）.attr（'数据角色'，'可折叠'）；
//创建h1和将其附加到账单列表的其他元素
$("",{
text:data[elem]。参考//这是标题
}).附件（包装）；
$（“
”{
文本：“ID:”+数据[elem].ID
}).附件（包装）；
$（“
”{
文本：“账户：”+数据[elem]。账户
}).附件（包装）；
$（“
”{
文本：“金额：”+数据[elem]。金额
}).附件（包装）；
wrap.appendTo（“#unpaidList”）；
})//每个循环的结束
$（“#unpaidList”）.collapsableset（“刷新”）；
})

编辑：

标题
标题
身份证号码：1

需要解释什么？对你来说太简单了？否决票有时意味着“试试！当你陷入困境时，让我们知道”。看看积极的一面；）谢谢你的话。我被困于在我的可折叠标题上获取复选框和存储变量。我没有添加所有代码，因为什么都没用，我已经做了几天了。我刚刚编辑并添加了我目前正在尝试的内容，即至少让标题首先有一个复选框，但该复选框不起作用。

$.getJSON("http://mywebsite.com/public/user/listunpaidbills/",function(data){
            //Loop for each element on the data
            $.each(data,function(elem){
                var wrap = $("<div/>").attr('data-role', 'collapsible');
                //Create the h1 and the other elements appending them to bills List
                $("<h1/>",{
                    text:data[elem].reference //this is the title
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"ID: "+ data[elem].id
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"Account: "+ data[elem].account
                }).appendTo(wrap);        
                $("<p/>",{
                    text:"Amount: "+ data[elem].amount
                }).appendTo(wrap);
                wrap.appendTo('#unpaidList');    
            })//end of for each loop
            $( "#unpaidList" ).collapsibleset( "refresh" );
        })

<div data-role="page" id="apple" data-theme="e">
          <div data-role="header">
          <h1>Title</h1>
          </div>

          <div data-role="main" class="ui-content">           
              <fieldset data-role="collapsible">
                <legend>Header</legend>

                <div data-role="controlgroup">
                  <label for="id">ID: 1</label>
                  <input type="checkbox" name="id" id="id" value="id">
                </div>  
              <input type="submit" data-inline="true" value="Confirm">
              </fieldset>           
          </div>
        </div>