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

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

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

1. Скажем, у меня есть 10 различных сегментов, каждый из которых имеет форму для принятия определенного набора информации [напр. Основные детали или контактные данные или хобби и т. Д.]. Я хочу иметь один редактировать кнопка для одной формы, чтобы сделать все ее поля редактируемыми, один Сохранить кнопка для сохранения обновленных данных (после их проверки) и отменить кнопка.
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-editable работу для этого.

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