Сохраннение измененных данных при клике на кнопку
 

Есть такая программка, где мы можем изменять данные Firstname, Lastname, Аge, mail, Password.
Что есть: при нажатии на Enter мы сохраняем наши изменения, при нажатии на Esc отменяем сохранение.
А мне надо еще чтоб при нажатии на кнопки save и cancel происходило тоже,что и при нажатии на Enter и Esc. Но у меня не получается.

'use strict';

function validateText(value){
	return value !== '' ? true:false;
}

function saveValue(value){
	console.log('save to server ' +value);
}

$('.list-group').on('click', '[editable]', function(event){
	event.preventDefault();

	var $element=$(this);

	var events = {
		aftersave: $element.attr('editable-aftersave') ? $element.attr('editable-aftersave'):null,
		beforesave: $element.attr('editable-beforesave') ? $element.attr('editable-beforesave'):null,
	};

	var type=$element.attr('editable');

	function endEdit(){
		$element
			.insertAfter(this)
			.text( $(this).val() );


			if(events.aftersave){
				window[events.aftersave]($(this).val());
			};

			$(this).remove();
	};


	
var save,cancel;

$('<input>')
		.insertAfter($element)
		.attr('type',type)
		.val($element.text())
		.focus(function(){
			
			save=$('<button>')
				.insertAfter('input')
				.attr('class','btn btn-primary')
				.append('<span class="glyphicon glyphicon-pencil"></span>')
				.click();
				
			cancel=$('<button>')
				.insertAfter('.btn-primary')
				.attr('class','btn btn-danger')
				.append('<span class="glyphicon glyphicon-remove"></span>')
				.click();
			
		})
		.select()
		.on('keyup', function(event){

			if(event.which===13){
				if(events.beforesave){
					var result = window[events.beforesave]($(this).val());

					if(result){
						endEdit.call(this);
					}

				} else {
						endEdit.call(this);
					}
				save.remove();
				cancel.remove();

			} else if(event.which===27){
				$(this).trigger('blur');
			}

		})
		.on('blur',function(event){
			$element.insertAfter(this);
			$(this).remove();
			save.remove();
			cancel.remove();
		});
	
	
	$element.remove();

});

когда пишу вот так:

.on('click', function(event){
			if(save){//тут
				if(events.beforesave){
					var result = window[events.beforesave]($(this).val());

					if(result){
						endEdit.call(this);
					}

				} else {
						endEdit.call(this);
					}
				save.remove();
				cancel.remove();

			} else if(cancel){//и тут
				$(this).trigger('blur');
			}

		})

то изменения не сохраняются.

Помогите, пожалуйста, разобраться