Working jsfiddle does nothing in webflow

Design help Custom code
1

Hello, everyone. I’m teaching myself to code and I’ve got a fairly good handle on html and css. My problem is when it comes to script. I have a jsfiddle (which I found online and modified) that works perfectly to change the background color of the parent label when a radio button is selected. But no matter what I do, it will not “fire” in webflow. Basically, I am trying to style Cognito Forms radio buttons if that helps. I fully expect that I’ve made some really dumb error, so don’t be shy about pointing it out :blush:. I would greatly appreciate any insight you folks can offer.

Thanks

Here is the html:

> <label class="c-yesno-radio">
>   <input type="radio">
>   <span>Testing</span>
> </label>
> <label class="c-yesno-radio">
>   <input type="radio">
>   <span>Testing 2</span>
> </label>

Here is the css:

.highlight {
background: #449dd7 !important;
}
.c-yesno-radio {
display:block;
position: relative !important;
background-color: #f5f5f5;
border:1px solid #449dd7;
color: #2b3b46 !important;
height: 65px !important;
font-family: lato, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 65px !important;
letter-spacing: normal !important;
text-align: center !important;
margin-bottom: 20px !important;
border-radius: 5px !important;
}
input[type=radio] {
opacity: 0 !important;
position: fixed !important;
width: 0 !important;
}
span {
position:absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}

Here is the script that I added to the Footer section of Custom Code under Project Settings. I did include the tags:

$(document).ready(function() {
//change colour when radio is selected
$(‘.c-yesno-radio input:radio’).click(function() {
// Only remove the class in the specific box that contains the radio
$(‘label.highlight’).removeClass(‘highlight’);
$(this).parent(‘.c-yesno-radio’).addClass(‘highlight’);
});
});