How to prevent more than one click on an Anchor tag button

Here you go with one more way to do it using pointer-events as none https://jsfiddle.net/w2wnuyv6/1/

$('a[value="cancel"]').click(function(){
    $(this).css({
        'pointer-events': 'none'
    });
});

Try using a boolean flag to make sure the function executes only once

var executeOnce = false;
$('.cancel-btn').on('click',function(evt){
   if(!executeOnce){
     //evt.preventDefault();
     //My Code  
     executeOnce = true;
   }     
});

jQuery one() method will perform click event only once:

$('.cancel-btn').one('click',function(evt){
  // evt.preventDefault();
  // code here            
});

Also possible using jQuery on() method that may be more useful when the event should be removed conditionally:

let count = 0; // or may be a boolean flag
$('.cancel-btn').on('click', function(evt){
  if (count == 0) {
    count++;
    // code here
  } else {
    return false;
    // or evt.preventDefault();
  }
});

Or like this:

$('.cancel-btn').on('click', function(evt) {
  // code here
  // then remove the event handler.
  $(this).off('click');
});