Discard the changes ERROR

by Kiran Duggal

HTML

<br>
<br>
<br>

<ul class="dashboard nav nav-tabs db-nav-tabs db-nav-tab-icons " id="tabs">
  <li class=" ">
    <a data-toggle="tab" href="#dashboard-content">
      <!-- span class="tab-name">Dashboard-temp</span -->
      <div>
        <label class="addon language_addon_name">
          <input id="tab-name-id-1" class="input-field inputCustomMax valid input-editable" type="text" name="collectionName" value="item 1 name" aria-invalid="false" readonly maxlength="30">
          <span class="call-translation-dialog-box addon-span bootstrap glyphicon glyphicon-text-background glyphiconColor db-add-language-icon" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="" style="display: block; padding:7px; opacity: 1;"></span>
        </label>
      </div>
      <span id="db-edit-name-1" class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></span>
      <span class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both"></span>
    </a>
  </li>
  <li class="">
    <a data-toggle="tab" href="#overview-content">
      <!-- span class="tab-name">Dashboard-temp</span -->
      <div>
        <label class="addon language_addon_name ">
          <input id="tab-name-id-2" class="input-field inputCustomMax valid input-editable" type="text" name="collectionName" value="item 2 name" aria-invalid="false" readonly maxlength="30">
          <span class="call-translation-dialog-box addon-span bootstrap glyphicon glyphicon-text-background glyphiconColor db-add-language-icon" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="" style="display: block; padding:7px; opacity: 1;"></span>
        </label>
      </div>
      <span id="db-edit-name-2" class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></span>
      <span class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both"></span>
    </a>
  </li>
  <li class="">
    <a data-toggle="tab"...

CSS

input{
  width:150px;
}
.db-nav-tabs {
  border-bottom: none !important;
  padding-left: 14px !important;
}

.db-nav-tabs li {
  /*    min-width: 150px;
    margin-top: 12px;*/
    background: beige;
    margin:10px;
    border-radius:10px;
}

.db-nav-tabs li a .glyphicon {
  /*padding:0 4px 0 8px;*/
  padding: 8px;
}

.db-nav-tabs>li>a {
  color: #959595;
  display: inline-flex !important;
}

.db-nav-tabs>li>a:hover {
  color: #333;
}

.db-nav-tabs li input {
  border: solid 1px transparent;
}


/*

.db-nav-tabs>li>a:focus,
.db-nav-tabs>li.active>a:focus{


background: #ffffff;
outline: none !important;
float: left;

padding-right: 5px !important;
padding-left: 5px !important;
border: none !important;
cursor: pointer !important;
;
}

*/

.db-nav-tabs>li>a,
.db-nav-tabs>li>a:focus,
.db-nav-tabs>li>a:hover {
  float: left;
  padding-right: 5px !important;
  padding-left: 5px !important;
  border: none !important;
  cursor: pointer !important;
   border-radius:10px;
}

.db-nav-tabs>li.active>a,
.db-nav-tabs>li.active>a:focus,
.db-nav-tabs>li.active>a:hover {
  background: #efefef;
  border: none !important;
}

JavaScript

var currentEditName, currentEditNameID, currentEditNameVal;
$(document).on('click', '.db-edit-tab ', function() {
  currentEditName = ($('.db-nav-tabs li.name-edit-mode-li').find('.input-edit-mode'));
  $(currentEditName).data('originalValue', $(currentEditName).val());
  console.log(currentEditName);
  //currentEditNameVal = $(currentEditName).val();


  discardChanges();
  editNames();
  dbSaveName();
  $(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
  $(this).closest('li').find('.db-add-language-icon').css('visibility', 'visible');
  $(this).closest('li').find('input').animate({
    width: '+=30px'
  });
  $(this).parent('a').find('.language_addon_name input').css('padding-right', '28px');
  setTimeout(function() {
    $(this).closest('li').find('.call-translation-dialog-box').css('display', 'block');

  }, 100);
  $(this).closest('li').toggleClass('name-edit-mode-li');
});

function discardChanges() {
  //currentEditName = ($('.db-nav-tabs li.name-edit-mode-li').find('.input-edit-mode'));
  currentEditNameID = ($('.db-nav-tabs li.name-edit-mode-li').find('.input-edit-mode').attr('id'));
  //currentEditNameID  = ('#'+ currentEditNameID);
  //currentEditNameVal = $(currentEditName).val();
  //console.log(currentEditNameID);
  //console.log(currentEditNameVal);
  //console.log($('#'+ currentEditNameID).val(currentEditNameVal));
  $(currentEditName).val($(currentEditName).data('originalValue'));
  console.log(currentEditName);
}

//    $(document).on('click', '.db-save-name', function (e) {
$(document).on('click', '.db-save-name', function() {
  // dbSaveName();
  editNames();
  $(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
...