使用X-editable可以在现有bootstrap3水平forms中编辑多个字段

我使用Bootstrap3进行前端开发，使用PHP进行后端处理。 我试图在我的一个页面（用户配置文件）中使用x-editable插件，其中我有几十个带有可编辑字段的表单。 每个表单都是为了接受注册用户的不同细节，因此具有所有类型的输入（文本，日期，数字，电子邮件等）。

我的要求是：

1. 假设我有10个不同的片段，每个片段都有一个表单来接受一组特定的信息[例如 基本细节或联系方式或爱好等]。 我想为一个表单创建一个“ 编辑”按钮以使其所有字段都可编辑，使用单个“ 保存”按钮来保存更新的数据（在validation它们之后）和“ 取消”按钮。
2. 我想发送一些隐藏的字段和表单。
3. 我已经有一个高度定制的Validation插件（）对我来说非常好用，我可以使用它而不是内置支持吗？ 因为，我在该插件中做了很多改变以满足我的要求，我不想再次经历这个循环。

这是我想要的演示

 
Contact Information  
 
 
 Name: 
  
 
 
 Email: 
  
 
 
 Phone Number: 
  
 
 
 Address: 
  
 
 
 
 Cancel Submit 
 
 
  

查看此表单的JSFiddle 。 如果有人可以为此做至少x可编辑的工作，我将会很有帮助。

PS：我是JSFiddle的新手，所以我不知道如何在那里进行基本的可编辑工作。 下次我会发布一个完全正是我尝试过的小提琴，而不是基本的html。 提前致谢。