Загрузка контента в модальном окне

[uamassimo]

Всем привет. Есть такая проблемка. У меня есть 100 вариантов опции (цветов например)
Я хочу выводить на странице товара только первые 5 цветов, а при клике на кнопку "Смотреть больше" открывается модалка и в ней уже все 100 цветов, и пользователь выбирает нужный

 

Есть код опций

<div class="form-group">
    <label class="control-label">{% if option.required %}<span class="required">*</span> {% endif %}{{ option.name }}</label>
    <div id="input-option{{ option.product_option_id }}" class="options-box-first d-xl-flex flex-wrap align-items-center">
        {% for option_value in option.product_option_value %}
        <div class="radio">
            <label data-toggle="tooltip" data-trigger="hover" class="optid {{ option.product_option_id }} {{ '1' == option_value.is_default ? 'selected' : 'not-selected' }} {% if option_value.image %} radio-img{% endif %}" {% if option_value.price %}title="{{ option_value.price_prefix }}{{ option_value.price }}"{% endif %} {{ '1' == option_value.is_default ? 'checked="checked"' : '' }}>
            <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" class="d-none" />
            {% if option_value.image %}
            <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}"  />
            <p class="option-value-name">{{ option_value.name }}</p>
            {% 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>
        {% endfor %}
    </div>
</div>

 

и код модального окна

<!-- Button trigger modal -->
<button type="button" class="btn-more-options" data-toggle="modal" data-target="#myModal">
    Переглянути більше
</button>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="myModalLabel">Виберіть опцію товару</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn-more-options" data-dismiss="modal">Повернутися до покупки товару</button>
            </div>
        </div>
    </div>
</div>

Использую бутстрап, сейчас пытаюсь вывести <div class="form-group"> в модальном окне где <div class="modal-body">

Сделал таким образом
 

$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        $('.modal-body').html( $('.form-group').html() );
    });
});

Так открываются опции в модалке, но теперь проблема с выбором, если я выберу на странице опцию, а потом открою модалку, то выбранный элемент так и есть выбранным
А вот если я выберу в модалке какую-то опцию, то при закрытии модалки сбрасывается выбор

Может кто знает как можно решить?

Змінено 19 серпня 2020 користувачем uamassimo