Issue with switching images using ajax

I'm having issues with the switching of images for a website I'm making. The intended outcome is that when you click the different colored circles, it changes the image (displaying the product with the corresponding image), however, for some reason nothing happens when clicking the circles. Any help would be appreciated.

Codepen link: https://codepen.io/StuartGroom/pen/ZExoJKw

HTML

<main>
<div class = "productCustomiseContainer">

                <!--left column/ image-->
                <div class ="leftColumn">
                    
                    <img data-image="black" src="images/blackProduct1.png" alt="">
                    <img data-image="white" src="images/whiteProduct2.png" alt="">
                    <img data-image="green" src="images/greenProduct1.png" alt="">
                    <img data-image="pink" class="active" src="images/pinkProduct1.png" alt="">
                </div>

                <!--right column-->
               <div class ="rightColumn">
                    <div class= "productDescription">
                        <span>Personal Safety Alarm</span>
                        <h1>WatchU</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus magni veritatis dolorem blanditiis unde tenetur aperiam tempore pariatur, nesciunt neque molestiae quo sunt culpa hic ipsum ex dolor accusamus nobis!</p>

                    </div>
                    <!-- product configuartion-->
                    <div class="productConfig">
                        
                        <!-- product colour-->
                        <div class="productColour">
                            <span>Select Colour</span>

                            <div class="colourChoose">
                                <div>
                                    <input data-image="pink" type="radio" id="pink" name="color" value="pink" checked>
                                    <label for="pink"><span></span></label>
                                </div>
                                <div>
                                    <input data-image="green" type="radio" id="green" name="color" value="green">
                                    <label for="green"><span></span></label>
                                </div>
                                <div>
                                    <input data-image="white" type="radio" id="white" name="color" value="white">
                                    <label for="white"><span></span></label>
                                </div>
                                <div>
                                    <input data-image="black" type="radio" id="black" name="color" value="black">
                                    <label for="black"><span></span></label>
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="productPrice">
                        <span>£10</span>

                    </div>

                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
                    <script src="product.js" charset="utf-8"></script>
                </div>


            </div>
</main>

CSS

main .productCustomise {
    width: 100vw;
    height: 100vh;
    background-color: blue;
}

.productCustomiseContainer{
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    display: flex;
    height: 700px;
}

.leftColumn{
    width: 65%;
    position: relative;
}

.rightColumn{
    width: 35%;
    margin-top: 50px;
}

/* left column */
.leftColumn img{
    width:100%;
    position:absolute;
    left: 0;
    top:0;
    opacity: 0;
    transition: all 0.3s ease;

}

.leftColumn img{
    opacity: 1;
}

/* right column */
.rightColumn .productDescription{
    border-bottom: 1px solid red;
    margin-bottom: 20px;
}

.rightColumn .productDescription span{
    font-size: 18px;
    color: black;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.rightColumn .productDescription h1{
    font-weight: 300;
    font-size: 52px;
    color: grey;
    line-height: 2px;
}

.rightColumn .productDescription p{
    font-weight: 300;
    font-size: 16px;
    color: grey;
    line-height: 24px;
}


/* prodcut configuration*/

.productColour span{
    font-weight: 300;
    font-size: 16px;
    color: grey;
    margin-bottom: 20px;
    display: inline-block;
}

/* product colour */

.productColour{
    margin-bottom: 30px;
}

.colourChoose div{
    display: inline-block;
}

.colourChoose input[type="radio"]{
    display:none;
}

.colourChoose input[type="radio"] + label span{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
}


.colourChoose input[type="radio"] + label span{
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}

.colourChoose input[type="radio"]#pink + label span {
    background-color: pink;
}
.colourChoose input[type="radio"]#green + label span {
    background-color: green;
}
.colourChoose input[type="radio"]#white + label span {
    background-color: white;
}
.colourChoose input[type="radio"]#black + label span {
    background-color: black;
}

.colourChoose input[type="radio"]:checked + label span{
    background-image: url(images/check-solid.svg);
    background-repeat: no-repeat;
    background-position: center;
}


/* product price*/
.productPrice{
    display: flex;
    align-items: center;
}

.productPrice span{
    font-size: 26px;
    font-weight: 300;
    color: black;
    margin-right: 20px;
}

/* responsive*/

@media (max-width: 940px){
    .productCustomiseContainer{
        flex-direction: column;
        margin-top: 60px;
    }
    .leftColumn, .rightColumn{
        width: 100%;  
    }
    .leftColumn img {
        width: 300px;
        right: 0;
        top:-65px;
        left:initial;
    }
}

@media (max-width: 535px){
    .leftColumn img{
        width: 220px;
        top: -85px;
    }
}

Javascript

$(document).ready(function() {

    $('.colourChoose input').on('click', function() {
        var productColour = $(this).attr('data-image');
        
        $('.active').removeClass('active');
        $('.leftColumn img[data-image = ' + productColour + ']').addClass('active');
        $(this).addClass('active');
    });

});