Cómo agregar clase

Quiero hacer una imagen en blanco y negro cuando la colocas sobre ella o haces clic en ella. Tiene que permanecer en blanco y negro hasta que se desplace o haga clic en otra imagen. Es por eso que decidí agregar una clase .seleccionada al div con una clase .in - para que una imagen pueda convertirse en blanco y negro (usando escala de grises (100%))

Funciona perfectamente con un objetivo simple: desplazarse en css, pero cuando uso addClass () de jQuery, ¡nada parece funcionar! ¿Por qué? y cual es la mejor manera de lograrlo? Aquí está mi html donde agrego mis imágenes:

@foreach (var image in Model.ProductImages)
    {
        <div class="in goal pic">
            <img src="~/Content/Images/apple.jpg" alt="test"/>
        </div>
    }

Aquí están mis estilos CSS:

    .in {
    text-align: center;
}


.goal {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.selected {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.pic {
    border: 2px solid #fff;
    float: left;
    height: 100px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #111;
    box-shadow: 5px 5px 5px #111;
}

Y aquí está mi guión

$(document).ready(function () {

    $(".in").hover(function () {
        $(".in").removeClass('selected');
        $(this).addClass("selected");
    });  
});