JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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>

JavaScript

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