JSFiddle - React, Tailwind, and code Playground

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-3 well">
        <ul class="nav nav-pills nav-stacked" id="sortable">
            <li id="pTabP" class="active"> <a href="#tab_preview" data-toggle="pill">
                                <span  id ="tabPr1" class="display edit_text">Preview Card</span>
                                <input type="text" class="edit" style="display:none"/>
                            </a>

            </li>
            <li id="fTab"> <a href="#tab_GInfo" data-toggle="pill">
                                <span  id ="tabG1" class="display edit_text">General Info</span>
                                <input type="text" class="edit" style="display:none"/>
                            </a>

            </li>
            <li id="pTab"> <a href="#tab_PreReq" data-toggle="pill">
                                <span id ="tabP2" class="display edit_text">Pre Requisites</span>
                                <input type="text" class="edit" style="display:none"/>
                            </a>

            </li>
            <li id="hTab"> <a href="#tab_Hardware" data-toggle="pill">
                                <span id ="tabH3" class="display edit_text">Hardware</span>
                                <input type="text" class="edit" style="display:none"/>
                            </a>

            </li>
            
            <li id="pTabP" class="active"> <a href="#tab_preview" data-toggle="pill">
                                <span  id ="tabPr1" class="display edit_text">Preview Card</span>
                                <input type="text" class="edit" style="display:none"/>
                            </a>

            </li>
            
            
            
            <li...

JavaScript

$(".edit_text").dblclick(function () {
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});


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

$(function () {
    $("#sortable").sortable({
      items: "li:not(#pTabP)"
    });
    $("#sortable").disableSelection();
});