Использование X-editable для создания нескольких полей, редактируемых в существующей горизонтальной форме bootstrap3

Я использую Bootstrap3 для разработки моего интерфейса и PHP для обработки бэкэнд. Я пытаюсь использовать x-editable плагин на одной из моих страниц (профиль пользователя), где у меня есть десятки форм с редактируемыми полями. Каждая форма предназначена для приема разных деталей зарегистрированного пользователя и, следовательно, имеет все типы входов (текст, дата, номер, адрес электронной почты и т. Д.).

Мои требования:

1. Скажем, у меня есть 10 разных сегментов, каждый из которых имеет форму для приема определенного набора информации [ex. Основные сведения или контактные данные или Хобби и т. Д.]. Я хочу иметь одну кнопку « Редактировать» для одной формы, чтобы сделать все ее поля доступными для редактирования, одну кнопку « Сохранить» , чтобы сохранить обновленные данные (после проверки их) и кнопку « Отмена» .
2. Я хочу отправить несколько скрытых полей вместе с формой.
3. У меня уже есть очень настраиваемый плагин Validation (), который работает очень хорошо для меня, могу ли я использовать это вместо встроенной поддержки? Потому что я внес много изменений в этот плагин в соответствии с моим требованием, я не хочу снова проходить этот цикл.

Вот демонстрация того, что я хочу

<div class="container"> <h2>Contact Information <button class="btn btn-default btn-xs pull-right"> <i class="glyphicon glyphicon-pencil"></i></button></h2> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for="name">Name:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" required max-length="50" placeholder="Enter Name"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" placeholder="Enter Email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="number">Phone Number:</label> <div class="col-sm-10"> <input type="number" class="form-control" id="number" required max-length="15" placeholder="Enter Phone Number"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="address">Address:</label> <div class="col-sm-10"> <textarea class="form-control" id="address" placeholder="Enter Address"></textarea> </div> </div> <div class="form-group text-right"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> 

Проверьте JSFiddle этой формы. Я был бы очень полезен, если бы кто-то мог сделать для этого x-редактируемую работу.

PS: Я новичок в JSFiddle, поэтому я не знал, как сделать там основную редактируемую работу. в следующий раз я выложу скрипку точно, что я пробовал и работает вместо базового html. Заранее спасибо.