Editable fields with 'apply' and 'cancel' buttons (too much recursion)

Question

I've got h2 tag with the attribute contenteditable="true". The goal is to make 'apply' button click by which makes contenteditable="false" and 'cancel' button which assigns initial h2 text to that h2, basically clears last edit and also sets contenteditable to "false". My codepen for this is https://codepen.io/utkapodsousom/pen/dJOMaB I cannot figure out how to make those buttons work without bubbling and recursion.

Answer 1

The answer to too much recursion problem is that in this piece of code I'm calling the function from within itself by writing .focus twice.

$('.editable').on('click focus', function(e) {
  $(this).attr('contenteditable', 'true');
  $(this).focus();
  e.stopPropagation();
});