求助！js中在同一个页面实现多条维护

现在在JQM中做一个页面，一个ul里面包括4个元素，其中有一个是select元素，option都是从后台数据库获取的，最下面有一个ul，是一个继续添加的按钮，现在要在点击继续添加按钮之后之后，在第一个ul下面生成一个和它一模一样的 [local]1[/local] 点击继续添加之后[local]2[/local]  ，现在的情况是生成第二个之后，select里面没有选项。现在不知道怎么破啊？
这是其中的代码

$("#addCompetitor").click(function(){               
//实现多条维护                                               
 var html="";
 html+="<ul data-role='listview' data-theme='b' class='competitor ui-listview ui-listview-inset ui-corner-all ui-shadow' data-inset='true'>";
 html+="<li data-role='list-divider' class='ui-li ui-li-divider ui-bar-b ui-corner-top ui-first-child'  data-theme='b' data-role='list-divider'   role='heading' >竞争对手明细:</li>";
 html+="<li data-theme='b' class='ui-li ui-li-static ui-btn-up-c'><input type='text' name='Competitor' placeholder='竞争对手:'></li>";
 html+="<li class='ui-li ui-li-static ui-btn-up-c'><input  type='text' class='li'  name='CompetitorProduct' placeholder='竞争产品:'></li>";
 html+="<li class='ui-li ui-li-static ui-btn-up-c'><label>处理级别</label><select  class='li'  name='DealWith'></select></li>";
 html+="<li class='ui-li ui-li-static ui-btn-up-c'><input  type='text' class='li'  name='Remark3' placeholder='备注:'></li>";
 html+="</ul>";
//防止动态添加控件丢失样式
$(html).insertBefore("ul#ul2").trigger("create");
});