JSFiddle - React, Tailwind, and code Playground

by DiegoTc

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="row">
            <div class="col-md-12 well">
                <div>
                    <button type="button" id="btPre" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-plus"></span></button>
                </div>
            </div>
             <div class="col-md-3 well">
                <ul class="nav nav-pills nav-stacked example" id="myTab">
                    <li id="cZero" class="active">
                            <a href="#tab_preview" data-toggle="pill">
                            <span  class="display edit_text">Preview Card</span>
                            <input type="text" class="edit" style="display:none"/>
                        </a>
                    </li>
                    
                   
                </ul>
            </div>
          
        </div>

JavaScript

$(".edit_text").on('dblclick', function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

$('#btPre').click(function(e) {
    var list = $('#myTab');
    var listActive = $('#myTab .active');
    addNewElement(list,listActive);
});

var addNewElement = function addNewElement(list,listActive){
    var psize= list.find('li');
    listActive.removeClass('active');
    psize = psize.size()-1;
    var newLi='<li class="active" id='+psize+'>';
    newLi=newLi+'<a href="#tab_preview" data-toggle="pill">';
    newLi=newLi+'<span  class="display edit_text">Card '+psize+'</span>';
    newLi=newLi+'<input type="text" class="edit" style="display:none"/></a></li>';
    list.append(newLi);
    $('#myTab a[href="#tab_preview"]').tab('show');
};