求大牛帮忙写一个思路

[澪悦]

我是一个js的新手。。。。。
要实现一个考场管理的js，
上面有两个管理的按钮
一个能添加一个 考场实例
另一个能再每个考场实例前面添加删除按钮。
然后每个实例点开之后能够编辑内容，我是用的X-editable
因为考场编号我设成了主键，所以需要存储一个不能编辑的属性，记录考场编号
有没有方便好用js可以引用一下或者希望大牛提点下应该怎么改。。。现在删除还没写出来，还有记录考场编号的办法也没写出来

添加时候的函数
$('#add_btn').click(function()
{
if(i==0|$("#exrooms_"+(i-1)).html()!="Empty")
{
$('#container').append('<button id="exrooms_'+i+'" name="exrooms" data-type="address" class="btn btn-info editable editable-click">Empty</button> ');
$('#exrooms_'+i).editable({
value: {
考场编号: undefined,
考场地址: undefined,
容纳人数: undefined
},
validate: function(value) {
if(value.考场编号 == '') return '考场编号必须填写！';
var reg = new RegExp("^[0-9]*$");
if(!/^[0-9]+$/.test(value.容纳人数))return '容纳人数必须为整数！';
},
placement:"bottom",
mode:"inline",
display: function(value) {
if(!value||(value.考场编号===undefined&&value.考场地址===undefined&&value.容纳人数===undefined)) {
$(this).empty();
return;
}
var html = '<b>『' + $('<div>').text(value.考场编号).html() + '』</b>, ' + $('<div>').text(value.考场地址).html() + ',「' + $('<div>').text(value.容纳人数).html()+'」';
$(this).html(html);
}
});
$('#exrooms_'+i).on('shown',function(e,editable)
{
$('#divlistExroom .modal-footer .btn-primary').attr('disabled','disabled');

});
$('#exrooms_'+i).on('hidden',function()
{
$('#divlistExroom .modal-footer .btn-primary').removeAttr('disabled','disabled');
});
i++;
}
});



提交时候的函数
$('#divlistExroom button.btn-primary').click(function()
{
var exroomsdata = $('[name=exrooms]').editable('getValue');
$.ajax({url:'system.php',
type:'POST',
timeout:10000,
success:edited,
error:failed,
data:{exrooms:exroomsdata}
});
});