Problems with js in wordpress

I have a problem with javascript on Wordpress!

I have to insert in my theme this pen https://codepen.io/z-/pen/OBPJKK .

HTML and css work, the only problem to fix is with javascript.

I replaced "$" in the original JS with "jQuery" and I entered this script in Theme Option> Advanced > Code Fields > Space Before head area:

<script type="text/javascript">
jQuery(document).ready(function() { 
  jQuery('.single .fusion-post-slideshow li img').each(function() {
  var caption = jQuery(this).attr('alt');
  jQuery(this).after('<span>' + caption + '</span>');
  }); 
});
</script>

The problem lies in the inability to reproduce the onclick effect of the aforementioned pen.

When going to the url of the page http://www.goatsplan.com/goats-magazine/, Wordpress seems not to recognize JS, and it is as if no code has been entered. Please, how can I solve this problem and keep the same type of animation in javascript?

Thank you very much

Solution

jQuery(".option").click(function(){
   jQuery(".option").removeClass("active");
   jQuery(this).addClass("active");

});

Just past the above jQuery in the Footer file/Template

Its working fine--> https://prnt.sc/r04jfi
https://prnt.sc/r04jug