Using X-editable to make multiple fields editable

Question

I am using Bootstrap3 for my frontend development and PHP for backend processing. I am trying to use x-editable plugin in one of my pages(user profile), where I have tens of forms with editable fields. Each form is meant to accept different details of a registered user and hence has all types of inputs(text,date,number,email etc.).

My requirements are:

1. Say I have 10 different segments, each having a form to accept a particular set of information [ex. Basic Details or Contact details or Hobbies etc.]. I want to have a single Edit button for one form to make all its fields editable, a single Save button to save updated data(after validating them) and a Cancel button.
2. I want to send few hidden fields along with the form.
3. I already have a highly customized Validation plugin() working very well for me, can I use that instead of the built in support? Because, I have made a lot of changes in that plugin to suit my requirement, I don't want to go through that cycle again.

Here is a demo of what I want

<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>

Check out the JSFiddle of this form. I would be of great help if someone can make atleast x-editable work for this.

P.S.: I am new to JSFiddle, so I did not know how to make the basic editable work there. next time I will post a fiddle of exactly what I have tried and is working instead of basic html. Thanks in advance.