make multiple tabs' name editable. with edit and save button

Question

I have a working code for tabs (bootstrap tabs), In this example I am only showing 3 tabs. later on they are generating dynamically.

So the problem is I want to make them editable. I am using input field to enter and save the data. Each tab has edit and save link with classes.

I want

1. When I click on edit it should remove readonly property from input field on selected/active tab. but add readonly to rest of the tabs. (so that user can't change the name)
2. Next when I click on save it should save the data as value.
3. Same if when first tab is already editable and then I try to make second of third tab editable. it should save the first and make editable next one.
4. changing the icons from save to edit and vice-virsa.

I know it long work to do. But I really need help. Thank you.

Example

Jquery

    $(document).on('click', '.db-edit-tab ', function () {
    $(this).parent('a').find('.input-editable').prop('readonly', '').focus().addClass('input-edit-mode');
        $(this).addClass("glyphicon-floppy-disk db-save-name").removeClass("glyphicon-edit db-edit-tab"); //New line Added
});


$(document).on('click', '.db-save-name', function (e) {
    $(this).parent('a').find('.input-editable').prop('readonly', 'true').removeClass('input-edit-mode');
    $(this).removeClass("glyphicon-floppy-disk db-save-name ").addClass("glyphicon-edit db-edit-tab "); //New line Added


});

Answer 1

So finally I have found the solution. I just check all the li element and apply the css and change readonly properties.

HTML

<div class="dash-board-text-container">
    <ul class="dashboard nav nav-tabs db-nav-tabs" id="tabs">
        <li class="active glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#dashboard-content">

                    <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->


                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard" maxlength="30px;" readonly>                                 </label>
               <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
        <li class=" glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#overview-content">
                <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->
                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard 2" maxlength="30px;" readonly>


                </label>
                <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
        <li class=" glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#dashboard-content3">

                    <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->


                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard 3" maxlength="30px;" readonly>                                 </label>
               <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="tab-pane fade in active" id="dashboard-content">content 1</div>
    <!-- dashboard-content -->
    <div id="overview-content" class="tab-pane fade in">overview-content nothing else</div>
    <!-- overview-content -->
    <div class="tab-pane fade in" id="dashboard-content3">content 3</div>
</div>
<!-- tab-content -->

jquery

$(document).on('click', '.db-edit-tab ', function () {
        editNames();
        $(this).parent('a').find('.input-editable').prop('readonly', '').focus().addClass('input-edit-mode');
        $(this).addClass("glyphicon-floppy-disk db-save-name").removeClass("glyphicon-edit db-edit-tab"); //New line Added

    });

    $(document).on('click', '.db-save-name', function (e) {
        $(this).parent('a').find('.input-editable').prop('readonly', 'true').removeClass('input-edit-mode');
        $(this).removeClass("glyphicon-floppy-disk db-save-name ").addClass("glyphicon-edit db-edit-tab "); //New line Added

    });
        function editNames(){

            $( "#tabs li" ).each(function() {
                var  activeClass =($('#tabs li').hasClass('active'));
                var  activeNoClass =($('#tabs li').not('active'));

                var  activeClassNew = ($(activeClass).find('.language_addon_name_icon'));
                var  activeNoClassNew = ($(activeNoClass).find('.language_addon_name_icon'));

                $(activeClassNew).addClass('glyphicon-floppy-disk db-save-name').removeClass('glyphicon-edit db-edit-tab');
                $(activeNoClassNew).removeClass('glyphicon-floppy-disk db-save-name').addClass('glyphicon-edit db-edit-tab');


                $(activeClass).find('.input-editable').prop('readonly','');
                $(activeNoClass).find('.input-editable').prop('readonly','false');

            });

        }