javascript - jQuery keep other boxes not edited state -

in code below when click edit other boxes loose edited icon until cancel clicked.

is there away can have if box not being edited keeps normal state of code?

the library using is: https://vitalets.github.io/x-editable/

normal state:

when edit button 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" 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 --> 

try changing following line:

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

to

$(this).hide();