Javascript in Squarespace isn't working?

Question

I have a custom form that uses javascript that I'd like to add to my site. What the form does, is in stead of having a text label it has an image label which will change when a user hovers over the image or selects the image. I have tested it outside of Squarespace and it seems to be working fine. It isn't working on Squarespace. I have tried putting the HTML/CSS/javascript together in a code block, I have tried putting the CSS in the custom CSS area, and I have tried using code injector to put the javascript in. Nothing seems to be working. The HTML/CSS show up perfectly, it's just that nothing happens when you hover or click on the image. Any ideas?

Here is my code:

Javascript:

$('#spiritWhiskeyCandle img').hover(
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskeyh_zpsf291cbeb.png');
         }
      },
     function () {
         if($(this).next().val() !== "1") {
             $(this).attr('src', 'http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png');
         }
     }
  );


$("#spiritWhiskeyCandle img").click(function() {
    if($(this).next().val() !== "1") {
         $(this).attr("src", "http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskeyc_zps62af06c4.png");
         $(this).next().val("1");
    } else {
         $(this).attr("src", "http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png");
         $(this).next().val("0");
    }
});

CSS:

#spiritWhiskeyCandle {
width:24%;
height:0;
padding-bottom:24%;
position:relative;
float:left;
margin-right:1%;
margin-bottom:1%;
}

#spiritWhiskeyCandle img {
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}

HTML:

<form>
    <label for="T3I1" id="spiritWhiskeyCandle">
        <img src="http://i1380.photobucket.com/albums/ah191/thedetroitbox/SpiritWhiskey_zps968a5a84.png">
        <input name="T3I1" type="radio" id="T3I1" style="display:none">
    </label>
</form>

Answer 1

You need to include jquery since you are using jquery functions. Add this snippet before the rest of your javascript. Preferably in the head section

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>