JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<p>X-editable Bootstrap 3 popup</p>
<div style="margin: 150px">
    <a href="#" id="status" data-value="2"></a>
</div>

JavaScript

// `/list` emulation
$.mockjax({
    url: '/list',
    responseTime: 400,
    responseText: [
        {value: 1, text: 'status 1'},
        {value: 2, text: 'status 2'},
        {value: 3, text: 'status 3'}
    ]
}); 

// editable
$('#status').editable({
    type: 'select',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'select status',
    source: '/list'
});


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