JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<span class="center title">Double Click Here to Add Title</span>

<ul class="sidebar-menu " id="documentlist">
    <li class='space sticky-new-document'> <a href="#" class="documents add newdoc">
                            <i class="fa fa-pencil"></i> <span>Create a New Document</span>
                        </a>

    </li>
    <li class='welcomedocument weldoc-fixed' id='input_1'> <a href="#" class="documents default-document">
                            <span>Welcome to CHUUBE</span>
                            <p class='welcome-date'>Today</p>
                        </a>

    </li>
</ul>

JavaScript

$('document').ready(function () {
    var id = 2,
        txt_box;
    $('#documentlist').on('click', '.add', function () {


        txt_box = "<li class='animated bounceInDown documenttobedeleted'  data-toggle='context' data-target='#context-menu'><a class='documents'><span class='editable'>New Document</span><p class='date'>Today</p></a></li>";
        $(".welcomedocument").after(txt_box);
        id++;
        $("#textarea").focus();
        $('.title').editable('toggle');


        $.fn.editable.defaults.mode = 'popup';
        $('.editable').editable({
            type: 'text',
            pk: 1,
            toggle: 'dblclick',
            onblur: 'submit',
            showbuttons: false,

        });


    });



});