Remove the wrapper `div` from the whole `h1 - h6` tag and only wrap the current one

I'm trying to remove the wrapper <div class="headWrap"> from the whole h1 - h6 tag and I need only wrap the current heading tag when I click on this.

Here is the link: https://jsfiddle.net/q8yhoxhd/4/

HTML:

<h1>
    Heading Test content 1
</h1>
<h2>
    Heading Test content 2
</h2>
<h3>
    Heading Test content 3
</h3>

JS

$(function(){
    $(document).on('click', function(event){
        var clickedTag;
            clickedtag = event.target;
      event.stopPropagation();
      var headings = $('h1, h2, h3, h4, h5, h6');
      if($(clickedtag == headings)){
      $(clickedtag).wrap($('<div/>').addClass('headWrap'));
      }
  });
});

CSS

.headWrap {
  background-color:red;
  color:#fff;
}