JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<div class="row-fluid">
<div class="span7">
<div class="accordion-body collapse in">
<div class="row-fluid" id="myDiv">
<div class="box box-color box-bordered">
<div class="box-title">
<h3><i class="icon-th-list"></i> Hi</h3>
</div>
<div class="box-content nopadding">
<table class="table table-hover table-nomargin table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a class="editable editable-click extraSectionTitle" data-original-title="Edit Title" data-pk="1" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Title">ASD ASD ASD ASD ASD </a>
</td>
<td> <a class="editable editable-click extraSectionDescription" data-original-title="Edit Description" data-pk="${extra?.id}" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Description">DSA DSA DSA DSA DSA </a>
</td>
...
JavaScript
$(function () {
$('.extraSectionTitle').editable({
success: function (response, newValue) {
if (response.status == 'error') {
return response.msg;
}
}
});
$('.extraSectionDescription').editable({
success: function (response, newValue) {
if (response.status == 'error') {
return response.msg;
}
}
});
});