Изменить класс div, когда выбран родительский элемент

Моя проблема / вопрос на самом деле связана с двумя проблемами, решения которых я не нашел.

Это div в "нормальном" состоянии (без наведения и выбора). Когда пользователь выбирает этот div, он становится фиолетовой рамкой. Моя проблема: Как мне изменить класс значка (этот синий значок), когда выбран родительский элемент?

Нормальное состояние:

Состояние наведения (значок) / выбранное состояние (родительский элемент)

Другая проблема: все div со значком относятся к одному классу. Я попробовал один код, и он сработал, но также выбраны все div .icon (есть 4 div, когда я выбираю один, он выбирает все div)

Это полный код: https://jsfiddle.net/905hut4v/ (вкладка результатов не будет работать, так как мне нужно скопировать и вставить весь код из проекта, и я думаю, что не могу [из-за NDA]). Я использую Foundation 6, поэтому в SCSS есть ошибка включения.

JS

$(function() {

    $('form[name = "form-jeitos"] .block-jeito').on('click', function() {
        $(this).siblings().removeClass("selected");
        $(this).addClass("selected");
    });

    $('.image-icon').on('click', function() {
        $(this).siblings().toggleClass('selected');
    });

    $('form[name = "form-jeitos"]').on('submit', function(e) {
        e.preventDefault();
        $(this).addClass("hide");
        $('#jeito-title').addClass("hide");
        var checked = $('input:checked', $(this));
        $('#'+checked.val()).siblings().removeClass("is-active");
        $('#'+checked.val()).addClass("is-active");
    });

    $('#jeito-opcoes a.back').on('click', function(e) {
        e.preventDefault();
        $('#jeito-opcoes .is-active').removeClass("is-active");
        $('form[name = "form-jeitos"]').removeClass("hide");
        $('#jeito-title').removeClass("hide");
    });

});

SCSS

.block-jeito {
    border: 2px solid rgba(1, 33, 105, 0.1);
    border-radius: 8px;
    padding: 30px 38px 30px 38px;
    opacity: 1;
    filter: alpha(opacity=1);
    transition: all 0.3s ease-in-out;
    margin-bottom: 60px;
    cursor: pointer;

    .image-icon {
        position: relative;

        .img {
            @include breakpoint(medium) {
                margin-left: -10px;
            }
        }

    }

    .icon {
        position: absolute;
        top: 35%;
        background-color: #1155CC;
        padding: 20px;
        left: 45%;
        border-radius: 50%;
        max-height: 75px;
        transition: all 0.3s ease-in-out;

        &:hover,
        &.selected {
            background-color: #00C7B1;
        }

        @include breakpoint(xsmall) {
            padding: 20px;
            left: 45%;
            top: 35%;
        }

        @include breakpoint(xxsmall) {
            padding: 20px;
            left: 45%;
            top: 35%;
        }

        @include breakpoint(medium) {
            padding: 20px;
            left: 25%;
            top: 45%;
        }

        @include breakpoint(xmedium) {
            padding: 15px;
            left: 55%;
            top: 45%;
        }

        @include breakpoint(large) {
            padding: 10px;
            left: 65%;
            top: 45%;
        }

        @include breakpoint(xlarge) {
            top: 45%;
            left: 55%;
            padding: 15px;
        }
    }

    &:hover,
    &.selected {
        border: 2px solid #5F249F;
    }

    &.hide {
        opacity: 0;
        filter: alpha(opacity=0);
        transition: opacity 0.3s ease-in-out;
    }

    p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;

        @include breakpoint(medium) {
            font-size: 24px;
            line-height: 36px;
        }

        strong {
            font-weight: 700;
        }

    }

    img {

        margin-bottom: 50px;

        @include breakpoint(medium) {
            margin-bottom: 0px;
        }

    }

}

HTML

<form name = "form-jeitos">

  <div class = "grid-x grid-margin-x">

    <label id = "codigo-block"
           class = "cell labl small-12 medium-6 block-jeito align-middle">

      <div class = "grid-x grid-margin-x">

        <div class = "cell small-12 large-4 image-icon">
          <img src = "../assets/img/foto-codigo.png" class = "img"
               alt = "Imagem de código e programação, representando a Nordware">
          <div class = "icon">
            <img src = "../assets/img/icon-codigo.png" alt = "">
          </div>
        </div>

        <div class = "cell small-12 large-8">
          <input type = "radio" name = "opcoes" value = "teste-nordware"
                 checked = "checked"/>
          <p><strong>Código e programação</strong> é comigo mesmo!</p>
        </div>

      </div>

    </label>

    <label id = "estrategia-block"
           class = "cell labl small-12 medium-6 block-jeito align-middle">

      <div class = "grid-x grid-margin-x">

        <div class = "image-icon" class = "cell small-12 large-4">
          <img src = "../assets/img/foto-estrategia.png" class = "img"
               alt = "Adoro trabalhar com estratégias, pessoas e processos.">
          <div class = "icon">
            <img src = "../assets/img/icon-estrategia.png" alt = "">
          </div>
        </div>

        <div class = "cell small-12 large-8">
          <input type = "radio" name = "opcoes" value = "teste-proxys"/>
          <p>Adoro trabalhar com <strong>estratégias, pessoas e
            processos.</strong></p>
        </div>

      </div>

    </label>

    <label id = "tecnologia-block"
           class = "cell labl small-12 medium-6 block-jeito align-middle">

      <div class = "grid-x grid-margin-x">

        <div class = "image-icon" class = "cell small-12 large-4">
          <img src = "../assets/img/foto-tecnologia.png" class = "img"
               alt = "Imagem de tecnologia e notebooks, representando a BringII">
          <div class = "icon">
            <img src = "../assets/img/icon-tecnologia.png" alt = "">
          </div>
        </div>

        <div class = "cell small-12 large-8">
          <input type = "radio" name = "opcoes" value = "teste-bringit"/>
          <p>Gosto de novidades, do mundo de <strong>tecnologia e
            notebooks.</strong></p>
        </div>

      </div>

    </label>

    <label id = "mobilidade-block"
           class = "cell labl small-12 medium-6 block-jeito align-middle">

      <div class = "grid-x grid-margin-x">

        <div class = "image-icon" class = "cell small-12 large-4">
          <img src = "../assets/img/foto-mobilidade.png" class = "img"
               alt = "Imagem de tecnologia e notebooks, representando a BringII">
          <div class = "icon">
            <img src = "../assets/img/icon-mobilidade.png" alt = "">
          </div>
        </div>

        <div class = "cell small-12 large-8">
          <input type = "radio" name = "opcoes" value = "teste-mobiz"/>
          <p>Seja carro, moto ou bike, eu curto é <strong>mobilidade.</strong>
          </p>
        </div>

      </div>

    </label>

    <div class = "cell small-12">

      <button type = "submit" class = "button">Conferir Resultados</button>

    </div>

</form>

Кстати, если вам интересно, почему в javascript есть еще две функции: когда пользователь выбирает div и нажимает кнопку отправки, мы «перенаправляем» пользователя на другую страницу (на самом деле мы просто отображаем div).