Как создать конструктор с послойным отображением результата Tilda

<script>
$(document).ready(function(){
    

//Преобразуем подписи картинок в 2 строки
$('.uc-calc-design .t-img-select__control').each(function(){
    let elem = $(this);
    let input = elem.find('input');
    //Убираем амперсанд из input
    let text = input.val().split('&');
    input.val(text[0]+' '+text[1]);
    
    //Формируем текст в 2 строки
    let descr = elem.find('.t-img-select__text');
    let newText = `<div class="ral-img">${text[0]}</div>
                   <div class="title-img">${text[1]}</div>`;
    //Выводим текст в 2 строки
    descr.html(newText);
    
});

//Создаём общий блок для картинки+заголовка+формы, чтобы сделать прилипание в моб версии
$('.uc-main-image, .uc-standart-title , .uc-calc-design').wrapAll('<div class="construktor-wrapper"></div>');




//Разметка формы
//Секция для выбора картинками
$('.uc-calc-design .t-input-group_ri').wrapAll('<div class="image-radio-section"></div>');
//Секция для выбора точками
$('.uc-calc-design .t-input-group_rd').wrapAll('<div class="radio-section"></div>');
//Секция для полей с контактами
$('.uc-calc-design .t-input-group_nm, .uc-calc-design .t-input-group_em, .uc-calc-design .t-input-group_ph').wrapAll('<div class="contact-section"></div>');
//Секция галочки и кнопки
$('.uc-calc-design .t-input-group_cb, .uc-calc-design .t-form__errorbox-middle, .uc-calc-design .t-form__submit ').wrapAll('<div class="button-section"></div>');



//Формируем слои из фото

//Слой для Сендвич-панели
(function () {
    setTimeout(function(){
        let block = $('.uc-sandwich-panels');
        let total = block.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
        let imageContainer = '';
        for(let i=1; i<=total;i++){
            let imageUrl = block.find('.t-slds__item[data-slide-index='+i+'] .t-slds__bgimg').attr('data-original');
            let imageTitle = block.find('.t-slds__caption[data-slide-caption='+i+'] .t-slds__title').text();
            imageContainer+=`<img class="t-img t-width t107__width t-width_12" data-image-ral="${imageTitle}" src="${imageUrl}" imgfield="img" alt="">`;
        };
        let mainContainer = `<div class="sandwich-panels new-layers">${imageContainer}</div>`;
        $('.uc-main-image .t107').append(mainContainer);
    }, 1500);
})();


//Слой для Декоративные элементы
(function () {
    setTimeout(function(){
        let block = $('.uc-decorative-elemen');
        let total = block.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
        let imageContainer = '';
        for(let i=1; i<=total;i++){
            let imageUrl = block.find('.t-slds__item[data-slide-index='+i+'] .t-slds__bgimg').attr('data-original');
            let imageTitle = block.find('.t-slds__caption[data-slide-caption='+i+'] .t-slds__title').text();
            imageContainer+=`<img class="t-img t-width t107__width t-width_12" data-image-ral="${imageTitle}" src="${imageUrl}" imgfield="img" alt="">`;
        };
        let mainContainer = `<div class="decorative-elemen new-layers">${imageContainer}</div>`;
        $('.uc-main-image .t107').append(mainContainer);
    }, 1500);
})();


//Слой для Ворота DoorHan и двери
(function () {
    setTimeout(function(){
        let block = $('.uc-gates-n-doors');
        let total = block.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
        let imageContainer = '';
        for(let i=1; i<=total;i++){
            let imageUrl = block.find('.t-slds__item[data-slide-index='+i+'] .t-slds__bgimg').attr('data-original');
            let imageTitle = block.find('.t-slds__caption[data-slide-caption='+i+'] .t-slds__title').text();
            imageContainer+=`<img class="t-img t-width t107__width t-width_12" data-image-ral="${imageTitle}" src="${imageUrl}" imgfield="img" alt="">`;
        };
        let mainContainer = `<div class="gates-n-doors new-layers">${imageContainer}</div>`;
        $('.uc-main-image .t107').append(mainContainer);
    }, 1500);
})();

//Слой для Тип ворот
(function () {
    setTimeout(function(){
        let block = $('.uc-gates-type');
        let total = block.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
        let imageContainer = '';
        for(let i=1; i<=total;i++){
            let imageUrl = block.find('.t-slds__item[data-slide-index='+i+'] .t-slds__bgimg').attr('data-original');
            let imageTitle = block.find('.t-slds__caption[data-slide-caption='+i+'] .t-slds__title').text();
            imageContainer+=`<img class="t-img t-width t107__width t-width_12" data-image-ral="${imageTitle}" src="${imageUrl}" imgfield="img" alt="">`;
        };
        let mainContainer = `<div class="gates-type new-layers">${imageContainer}</div>`;
        $('.uc-main-image .t107').append(mainContainer);
    }, 1500);
})();

//Слой для Рамы окон
(function () {
    setTimeout(function(){
        let block = $('.uc-window-frames');
        let total = block.find('.t-slds__items-wrapper').attr('data-slider-totalslides');
        let imageContainer = '';
        for(let i=1; i<=total;i++){
            let imageUrl = block.find('.t-slds__item[data-slide-index='+i+'] .t-slds__bgimg').attr('data-original');
            let imageTitle = block.find('.t-slds__caption[data-slide-caption='+i+'] .t-slds__title').text();
            imageContainer+=`<img class="t-img t-width t107__width t-width_12" data-image-ral="${imageTitle}" src="${imageUrl}" imgfield="img" alt="">`;
        };
        let mainContainer = `<div class="window-frames new-layers">${imageContainer}</div>`;
        $('.uc-main-image .t107').append(mainContainer);
    }, 1000);
})();


//Показываем выбранные слои
function showLayers(){
    //Получаем выбранные опции
    
    //Сендвич-панели
    let sandwichRal =  $('input[name="sandwich-panels"]:checked').val().replace(/[^0-9]/gi, '');
    //Декоративные элементы
    let decorativeRal =  $('input[name="decorative-elements"]:checked').val().replace(/[^0-9]/gi, '');
    //Ворота DoorHan и двери
    let gatesRal = $('input[name="gates-n-doors"]:checked').val().replace(/[^0-9]/gi, '');
    //Тип ворот
    let typeRal = $('input[name="gates-type"]:checked').val();
    //Рамы окон
    let windowRal = $('input[name="window-frames"]:checked').val();
    
    //Изначально удаляем класс активности у всех слоёв
    $('.uc-main-image img').removeClass('show-layer');
    
    //Выводим слои по активным опциям
    $('.sandwich-panels img[data-image-ral="'+sandwichRal+'"]').addClass('show-layer'); //Сендвич-панели
    $('.decorative-elemen img[data-image-ral="'+decorativeRal+'"]').addClass('show-layer'); //Декоративные элементы
    $('.gates-n-doors img[data-image-ral="'+gatesRal+'"]').addClass('show-layer'); //Ворота DoorHan и двери
    $('.gates-type img[data-image-ral="'+typeRal+'"]').addClass('show-layer'); //Тип ворот
    $('.window-frames img[data-image-ral="'+windowRal+'"]').addClass('show-layer'); //Рамы окон
    
};

setTimeout(function(){
    showLayers();
}, 1500);

//Отслеживаем переключение элементов в Формируем
$(document).on('change', '.uc-calc-design', function(){
    showLayers();
});

});
</script>



<style>

.uc-sandwich-panels,
.uc-decorative-elemen,
.uc-gates-n-doors,
.uc-gates-type,
.uc-window-frames

{
    display: none;
}



.uc-calc-design .t-input-group.t-input-group_cb {
    grid-column: 1 / 3;
}

.uc-calc-design .t-form__inputsbox {
    display: grid;
    grid-template-columns: auto 170px;
    grid-gap: 25px;
}

.uc-calc-design .t-input-group.t-input-group_tx {
    grid-column: 1 / -1;
}

.uc-calc-design .contact-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
}

.uc-calc-design .button-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
    grid-column: 1 / 3;
}

.uc-calc-design .t-form__errorbox-middle {
    order: 1;
}

.uc-calc-design .t678 .t-form__submit {
    margin-top: 0;
    margin-bottom: 0;
    text-align:right;
}  


.uc-calc-design .image-radio-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
}

.uc-calc-design .t-input-title {
    height: auto;
    font-size: 16px;
    margin-bottom: 20px !important;
}

.uc-calc-design .t-img-select__text.t-text {
    font-size: 10px;
}

.uc-calc-design .t-img-select__indicator:after {
    width: 24px;
    height: 24px;
}

.uc-calc-design label.t-radio__control.t-text {
    font-size: 14px;
}

.uc-calc-design .t-img-select__indicator:after {
    width: 24px;
    height: 24px;
}

.uc-calc-design label.t-radio__control.t-text {
    font-size: 14px;
}

.uc-calc-design .t678 .t-input-group {
    margin: 0;
}

.uc-calc-design .t678 .t-form_bbonly .t-input-block {
    margin: 0;
}


.uc-calc-design .t-input-group.t-input-group_tx .t-text {
    font-size: 16px;
    font-weight: 400;
}

.uc-calc-design label.t-checkbox__control.t-text {
    font-size: 13px;
    position: relative;
    padding-left: 26px;
}

.uc-calc-design .t-checkbox__indicator {
    position: absolute;
    left: 0;
    top: 0;
}

.uc-calc-design button.t-submit {
    font-size: 20px;
    height: 55px;
    width: 100%;
}

.uc-calc-design .t-form__errorbox-middle {
    display: none;
}


.uc-main-image .t107 {
    position: relative;
    pointer-events: none;
}

.new-layers {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.new-layers img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.new-layers .show-layer{
    opacity: 1;
}


@media screen and (max-width:1200px){
.uc-calc-design label.t-radio__control.t-text{
    font-size:12px;
}

.uc-calc-design .t-form__inputsbox {
    grid-template-columns: auto 120px;
    grid-gap: 15px;
}    

.uc-calc-design button.t-submit {
    font-size: 16px;
    padding: 0 30px
}

.uc-calc-design .button-section {
    grid-template-columns: repeat(3, 1fr);
}    
    
}


@media screen and (max-width:960px){
.uc-calc-design .t-form__inputsbox {
    display: block;
   
}
.uc-calc-design .image-radio-section {
    display: block;

}

.uc-calc-design .t-img-select__control, .uc-calc-design  .t-img-select__item {
    width: calc(12% - 10px);
}

.uc-calc-design .radio-section {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-column-gap: 40px;
    margin-bottom: 20px;
}

.uc-calc-design .contact-section {
    display: block;
    margin-bottom: 25px;
}

.uc-calc-design .button-section {
    display:block;
    margin-top: -10px;
}

.uc-calc-design .t678 .t-form__submit {
    margin-top: 20px;
    margin-bottom: 0;
    text-align: center;
    width: 100%;
}

.uc-calc-design button.t-submit {
    width: 100%;
}

.uc-calc-design label.t-checkbox__control.t-text {
    font-size: 10px;
}

.uc-main-image {
    position: sticky;
    top: 0;
    pointer-events: none;
    z-index: 99;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 35%);
    overflow: hidden;
}

    
}


@media screen and (max-width:640px){

.uc-calc-design .t-img-select__control, .uc-calc-design  .t-img-select__item {
    width: min-content;
    min-width: 80px;
}
.uc-main-image .t107 {
    transform: scale(1.3);
}


}

</style>