JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<div><a href="#" class="edit_text">Name Me</a></div>
<div><a href="#" class="edit_text">Name Me</a></div>
<div class="name-list">
    <p>Text 1</p>
    <p>Text 2</p>
</div>

CSS

.name-list {
    margin-top: 20px;
}

JavaScript

$.fn.editable.defaults.mode = 'inline';
$('.edit_text').editable({
    type: 'text',
});

//var title = $('.edit_text').editable('getValue');
$('.name-list p').html(title);