Step 1: Tab 1 and Tab 2 are there from before.
Step 2: Double click on Tab 1 and get a option to rename tab heading.
Step 3: Double click on Tab 2 and get a option to rename tab heading.
<div id="tabs">
<ul class="nav nav-tabs">
<li class="tab-txt active"><input class="txt_tab_head" type="text"/><a class="tabanchor" href="#contact_1" data-toggle="tab">Tab 1</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>
<li class="tab-txt"><input class="txt_tab_head" type="text"/><a class="tabanchor" href="#contact_2" data-toggle="tab">Tab 2</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>
<li><a href="#" class="add-contact" data-toggle="tab"><i class="fa fa-plus-circle" style="font-size:15px"></i></a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="contact_1"><!--Contents of : Tab 1-->
<h1>Contents of Tab 1<h1>
</div>
<div class="tab-pane fade" id="contact_2"><!--Contents of : Tab 2-->
<h1>Contents of Tab 2<h1>
</div>
</div>
//Add tab and content
$('.add-contact').click(function(e) {
e.preventDefault();
var id = $(".nav-tabs").children().length;
$(this).closest('li').before('<li class="tab-txt"><input class="txt_tab_head" type="text"/><a href="#contact_' + id + '">New Tab ' + id + '</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>');
$('.tab-content').append('<div class="tab-pane fade" id="contact_' + id + '"><h3>Contents of Tab ' + id +'</h3></div>');
});
//Renaming tabs
$('.tab-txt').on('dblclick',function(){
$(this).find('input').toggle().val($(this).find('a').html()).focus();
$(this).find('a').toggle();
});
$('.tab-txt').on('blur','input',function(){
$(this).toggle();
$(this).siblings('a').toggle().html($(this).val());
});
//Sorting Tabs
$( function() {
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});