Как сменить класс в зависимости от выбранной опции (radio)

Не понимаю как реализовать смену класса в зависимости от выбраной опции. Просто нехватает знаний...

Есть скрипт, при клике по опции, он добавляет класс. Но вот как сменить класс если выбрана опция, не знаю.

Скрипт который отвечает за смену класса при клике.

$(document).ready(function() { $('label.optid.{{ option.product_option_id }}').click(function(){
                                                                    $('label.optid.{{ option.product_option_id }}').removeClass('selected').addClass('not-selected');
                                                                    $(this).removeClass('not-selected').addClass('selected');
                                                                });
                                                            });

Пример работы

Я уже закрыл глаза на то, что при обновлении страницы все классы "selected" пропадают. Главное чтобы они были подсвечены если опция выбрана без клика...

Вот html если что

<div class="radio {% if option_value.image %} img-op {% endif %}">
                                                        <label data-toggle="tooltip"
                                                                {% if option_value.image %}  onclick="$('#option_title_{{ option.product_option_id }}').html('<b>{{ option_value.name }}</b>');" {% endif %}
                                                               data-trigger="hover" class="optid {{ option.product_option_id }} not-selected{% if option_value.image %} radio-img{% endif %}" {% if option_value.price %}title="{{ option_value.price_prefix }}{{ option_value.price }}"{% endif %}>
                                                            <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" class="d-none" id="DM-option{{ numopt }}"/>
                                                            {% set numopt = numopt + 1 %}
                                                            {% if option_value.image %}
                                                                <div class="text-center KT-opc-box">
                                                                    <img data-toggle="tooltip" title="{{ option_value.name }}"

                                                                         src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="KT-opc-img" width="auto" height="auto" />
                                                                </div>
                                                            {% else %}
                                                                {{ option_value.name }}
                                                            {% endif %}
                                                        </label>
                                                        <script>
                                                            $(document).ready(function() { $('label.optid.{{ option.product_option_id }}').click(function(){
                                                                    $('label.optid.{{ option.product_option_id }}').removeClass('selected').addClass('not-selected');
                                                                    $(this).removeClass('not-selected').addClass('selected');
                                                                });
                                                            });
                                                        </script>
                                                    </div>