Can't get javascript to work (Visual Composer)

Hello,

I am having some issues trying to get a snippet of javascript code to work.

I am trying to use a flip box I found on code pen.

I am using Visual Composer and I have copied the pasted the html and css no problem, you can see that here

But I can not get the javascript to work. I have tried two options:

1. Visual Composer has the option to add raw js
2. My theme has a “javascript” option in customizer.

But neither option is working. I know the code itself it right as it work in CodePen, and I just can not figure out what I am missing. Is there something else I need to add to the code to get it to work?

I am a complete novice with js so I am clueless.

The js code is

$(document).ready(function() {

	  $('.panel').on('click', function() {
	    if ($(this).hasClass('flip'))
	      $(this).removeClass('flip');
	    else
	      $(this).addClass('flip');
	  });
	});

and the HTML:

<div class="wrapper">
       <div class="hover panel">
          <div class="front">
            <div class="box1">
              <p>Front Side</p>
            </div>
          </div>
          <div class="back">
            <div class="box2">
              <p>Back Side</p>
            </div>
          </div>
      </div>
</div>

Any advice would be truly appreciated.

Thank you,

Dan