jQuery keep other boxes not edited state

Question

In the code below when I click edit the other boxes loose the edited icon until cancel is clicked.

Is there away that I can have it so that if a box is not being edited it keeps the normal state of code?

The library I am using is: https://vitalets.github.io/x-editable/

Normal State:

When an edit button is clicked:

jQuery:

/* X-Editable */

$(function(){


$.fn.editable.defaults.mode = 'inline';

$.fn.editable.defaults.params = function (params) {
    params._token = $("#_token").data("token");
    return params;
};
   var dataURL   = $('.updateField').data('url');
   var inputName = $('.updateField').attr("name");

$('.updateField').editable({
    type: 'text',
    url: dataURL,    
    name: inputName,    
    placement: 'top',
    title: 'Enter public name',
    toggle:'manual',
    send:'always',
    ajaxOptions:{
      dataType: 'json'
    }    
});

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !!
    var input     = container.find('.updateField');
    var inputName = input.attr('name');
    var dataURL   = input.data('url');

      console.log(inputName);  
       e.stopPropagation();
       container.find('.updateField').editable('toggle'); // !!
       container.find('.edit').hide(); // !!
});
    $(document).on('click', '.editable-cancel, .editable-submit', function(e){
        $(e.target).closest('.input-group').find('.edit').show(); // !!
    })           
//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 100,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
}); 

});

Normal State HTML:

<input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" />
    <div class="box-body">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="siteName">Website Name</label>

        <div class="col-sm-3">
          <div class="input-group">
            <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span>
          </div>
        </div>
      </div>


      <div class="form-group">
        <label class="col-sm-2 control-label" for="siteEmail">Website E-Mail Address</label>

        <div class="col-sm-3">
          <div class="input-group">
            <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1) }}"data-title="Website E-Mail Address" name="siteEmail" placeholder="Site E-Mail" type="email" value="{{ old('siteEmail', $siteSettingsData->siteEmail) }}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span>
          </div>
        </div>
      </div>


      <div class="form-group">
        <label class="col-sm-2 control-label" for="siteCopyright">Website Copyright</label>

        <div class="col-sm-3">
          <div class="input-group">
            <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Copyright" name="siteCopyright" placeholder="Site Copyright" type="input" value="{{ old('siteCopyright', $siteSettingsData->siteCopyright)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span>
          </div>
        </div>
      </div>
    </div>
    <!-- /.box-body -->

Answer 1

Try using $(e) instead of $(this) in the following code:

$('.edit').click(function(e){ 
    //var container = $(this).closest('.input-group');
    var container = $(e).closest('.input-group');
    var input     = container.find('.updateField');
    var inputName = input.attr('name');
    var dataURL   = input.data('url');

      console.log(inputName);  
       e.stopPropagation();
       container.find('.updateField').editable('toggle'); // !!
       container.find('.edit').hide(); // !!
});

Answer 2

It seems like you are using some bootstrap design template.From my point of view the code

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !!
    var input     = container.find('.updateField');
    var inputName = input.attr('name');
    var dataURL   = input.data('url');

      console.log(inputName);  
       e.stopPropagation();
       container.find('.updateField').editable('toggle'); // !!
       container.find('.edit').hide(); // !!
});

seems ok.I don't understand the line container.find('.updateField').editable('toggle'); // !! in the function.Are you using some kind of library. My suggestion is to remove that line from your code and test.Also check whether you are getting the correct value of inputName outputted.And finally check in the console for any errors when you click the edit button.

Answer 3

try changing the following line:

container.find('.edit').hide();

to

$(this).hide();