[MC-XOBAHCK]

Здравствуйте!

Пишу для своего профильного форума конструктор, который будет генерировать сниппеты.
Конструктор собирает данные у пользователя, упрощая ему постановку вопроса и значительно экономя время.
Через position:sticky выводится макет с предпросмотром получаемых данных - макет чем то похож на карточку товара (изображение, размеры и др. нужные данные).
С предпросмотром у меня проблем нет - через обработчики событий он у меня работает как надо.

У меня проблема с генерацией сниппета. Я не знаю как в него получать данные из обработчиков.
Внизу HTML-кода есть input id="snipCode" - это поле вывода сгенерированного сниппета.
Я код максимально укоротил, чтобы огромнейшую портянку не вставлять, а макет даю чтобы донести суть своего вопроса.

<div class="constructor">
	<div>
    <h3>Название:</h3>
    <input type="text" class="nameSnip" id="nameSnip" placeholder="Введите название проекта"><button class="btn-danger" id="nameDelete" title="Удалить название">X</button>
  </div>
	<div class="typeKr">
		<h3>Тип крыши:</h3>
 		<div class="btn-group" data-toggle="buttons">
		  <label class="btn"><input type="radio" name="typeKr" value="1" checked>Односкатная</label>
		  <label class="btn"><input type="radio" name="typeKr" value="2">Двускатная</label>
		  <label class="btn"><input type="radio" name="typeKr" value="3">Шатровая</label>
		</div>
	</div>
	<div class="uteplitel">
		<h3>Утепление:</h3>
 		<div class="btn-group" data-toggle="buttons">
		  <label class="btn"><input type="radio" name="uteplitel" value="1" checked>Холодная крыша</label>
		  <label class="btn"><input type="radio" name="uteplitel" value="2">Тёплая крыша</label>
		</div>
	</div>
	<div>
	       ...
	</div>

	<!-- Снипет -->
	<div class="snip">
  	<span>Код для вставки:</span>
		<input id="snipCode" type="text" class="" placeholder="Код для вставки на форум" value="">
  </div>
</div>

В общем идёт сбор данных через радио-кнопки, инпуты и селекты.

В скрипте у меня получилось написать обработчики, которые дают результат в предпросмотр.
А вот как получить данные из обработчиков в новые переменные я не могу найти решения.

Вот часть скрипта, где нужно результат из $('.name').keyup(function() получить в переменную nameSnip
чтобы при изменении данных эти изменения происходили не только в макете предпросмотра, но и в коде сниппета

$(function() {
    var name = $('.nameSnip');  //Название
    
    $('.nameSnip').keyup(function() {
        $("#prosmotpName").text($(this).val());
    });


    $('#snipCode').click( function(){    //Выделение кода сниппета при клике в поле
        this.select()
    });
    //Код cниппета
    var nameSnip;
    var snipCode = '[snip ' + nameSnip + typeKr + sizeA + sizeB + ' snip]';
    $("#snipCode").val(snipCode);//Вывод сниппета
});