JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<p>X-editable: work with delegated targets</p>
<div style="margin: 150px">
   <div id="user">
     <div>Username: <a href="#" data-name="username" data-type="text" title="Username" class="editable-click">awesome</a></div>
     <div>Group: <a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" title="Group" class="editable-click">Operator</a></div>
  </div> 
  <br><br>
     <button id="add-empty">Add empty field</button> 
    <button id="add-non-empty">Add non-empty field</button>
</div>

JavaScript

//apply editable to parent div
$('#user').editable({
  selector: 'a',
  url: '/post',
  pk: 1
});

$('#add-empty').click(function(){
  var i = $('#user a').length,
      html = '<div>Field '+i+': <a href="#" data-name="field'+i+'" data-type="text" data-value="" title="Field '+i+'" class="editable-click editable-empty">Empty</div>';
  $('#user').append(html);
});

$('#add-non-empty').click(function(){
  var i = $('#user a').length,
      html = '<div>Field '+i+': <a href="#" data-name="field'+i+'" data-type="text" title="Field '+i+'" class="editable-click">abc</div>';
  $('#user').append(html);
});

//ajax emulation. 
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
}); 

$.mockjax({
  url: '/groups',
  responseText: [{value: 0, text: 'Admin'}, {value: 1, text: 'Operator'}]
});