Изменить тип текста по select

function addText() { 
    var type = $(".select-txt").val(); 
    var align = $(".form-align").val(); 
    var typeEdit = $('.select-txt-type').val(); 
    var float = "text-align:"; 
    var id = Date.now(); 
    var editBlock = "$('.edit-block')"; 
    var display = ",'block'"; 
    var colorValue = $(".color").val(); 
    var color = "color:"; 
    var closeTag = ";"; 
    var onclick = 'onclick="editTextColour(this)"'; 
    var ordinary = "<div class='text-" + align + "' id=" + id + " " + onclick + " contenteditable style=" + float + align + closeTag + 
        ">text</div>"; 
    var h = "<" + type + " class='text-" + align + "' id=" + id + " " + onclick + " contenteditable style=" + float + align + ">text</" + type + ">"; 
 
    if (type == "ordinary") { 
        $(".preview").append(ordinary); 
 
    } else if (type.startsWith("h")) { 
        $(".preview").append(h); 
    } 
 
 
    $(".color").minicolors({ 
        defaultValue: "#000" 
    }); 
    $(".color").on("change", function() { 
        var colorValue = $(".color").val(); 
        $('.preview .editing').css('color', colorValue); 
    }); 
 
} 
 
$('.select-txt-type').on('change',function(){ 
var typeEdit = $('.select-txt-type').val(); 
var hEditor = "<" +typeEdit+ ">text</" +typeEdit+ ">"; 
var spanEditor = "<span>text</span>"; 
    $('.preview').removeClass('editing'); 
    if (typeEdit == "span") { 
        $(".preview .editing").html(spanEditor); 
        $(".preview").addClass('editing'); 
    } 
    else if (typeEdit.startsWith("h")) { 
        $(".preview .editing").html(hEditor); 
        $(".preview").addClass('editing'); 
    } 
  }); 
function showTextWindow() { 
    var modal = $(".modal-txt-container"); 
    if (modal.css('display', "none")) { 
        modal.css('display', "grid"); 
    } else { 
        modal.css('display', "none"); 
    } 
} 
 
function showTextWindow() { 
    var modal = document.querySelector(".modal-txt-container"); 
    if (modal.currentStyle) { 
        var displayStyle = modal.currentStyle.display; 
    } else if (window.getComputedStyle) { 
        var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display"); 
    } 
 
    if (displayStyle == "none") { 
        modal.style.display = "grid"; 
    } else { 
        modal.style.display = "none"; 
    } 
} 
 
function showElement() { 
    var modal = document.querySelector(".choose-option"); 
    var add = document.querySelector('.add'); 
    if (modal.currentStyle) { 
        var displayStyle = modal.currentStyle.display; 
    } else if (window.getComputedStyle) { 
        var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display"); 
    } 
 
    if (displayStyle == "none") { 
        modal.style.display = "grid"; 
    } else { 
        modal.style.display = "none"; 
        add.style.display = "block"; 
    } 
} 
 
 
function editTextColour(elem) { 
	$('.editing').removeClass('editing'); 
	$(elem).addClass('editing'); 
	$('.edit-block').show(); 
}

* { 
    outline: none; 
    padding: 0; 
    margin: 0; 
  } 
  .choose-option { 
      background-color: #352a2c; 
      position: fixed; 
      color: white; 
      font-family: 'Scada', sans-serif; 
      padding: 15px; 
      width: 14%; 
  } 
  .insert-txt-block { 
      padding-bottom: 3%; 
      font-size: 1.3em; 
  } 
  .btn-txt::before { 
    content: '\f031'; 
    font-family: "fontAwesome"; 
    margin-right: 3%; 
} 
.btn-txt { 
    font-size: 1.2em; 
    list-style: none; 
    transition: 0.1s; 
    padding: 5px; 
} 
.btn-txt:hover { 
  background-color: #727272; 
} 
.modal-insert-txt { 
    background-color: #352a2c; 
    color: white;   
    font-family: 'Scada', sans-serif;   
    padding: 20px; 
    padding-right: 25px; 
    width: 130%; 
    border-radius: 4px; 
} 
.modal-txt-container { 
    display: grid; 
    justify-content: center;    
    right: 0;    
    left: 0;   
    position: fixed; 
    top: 15%; 
    display: none; 
} 
.container { 
  position: fixed; 
} 
select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -ms-appearance: none; 
    appearance: none; 
    outline: 0; 
    box-shadow: none; 
    border: 0 !important; 
    background-image: none; 
    width: 85%; 
    height: 100%; 
    margin: 0; 
    padding: 0 0 0 .5em; 
    cursor: pointer; 
    color: black; 
    background: white; 
    border-radius: 1px 0px 0px 1px; 
} 
.form-group::after { 
    content: '\25BC'; 
    position: absolute; 
    padding: 0 0.5em; 
    background: rgb(59, 61, 52); 
    pointer-events: none; 
    line-height: 1.7em; 
    -webkit-transition: .25s all ease; 
    -o-transition: .25s all ease; 
    transition: .25s all ease; 
    color: white; 
} 
.form-group { 
    position: relative; 
display: block; 
height: 1.7em; 
margin: 1% 0% 5% 0; 
border: 1px solid #272822; 
} 
.btn-insert-txt { 
    border: none; 
    color: white; 
    background: #ff5959; 
    padding: 5px; 
    font-size: 1.01em;  
    border-radius: 2px; 
    cursor: pointer; 
} 
.btn-insert-txt:hover { 
    background: #e54040; 
} 
.modal-insert-txt span { 
    font-size: 1.1em; 
} 
.modal-insert-txt h2 { 
    padding-bottom: 2%; 
} 
.modal-insert-txt hr { 
    margin-bottom: 3%; 
} 
.flex-close-title { 
    display: flex; 
    justify-content: space-around; 
} 
.type-insert li { 
    cursor: pointer; 
} 
.close { 
    font-size: 1.7em; 
    margin-top: -1%; 
    cursor: pointer; 
} 
.close::after { 
    content: '\f057'; 
    font-family: "fontAwesome"; 
    color: #ff5959; 
} 
.add { 
    font-size: 2em; 
    cursor: pointer; 
    display: none; 
    position: fixed; 
    left: 1%; 
    top: 2%; 
} 
.add::after { 
    content: '\f055'; 
    font-family: "fontAwesome"; 
    color: #ff5959; 
} 
#textarea-edit { 
    width: 80%; 
height: 100px; 
resize: none; 
border: 2px solid #3B3D45; 
background: #3B3D45; 
color: white; 
padding: 4%; 
font-size: 1.05em; 
border-radius: 4px; 
display: flex; 
justify-content: center; 
position: relative; 
top: 1%; 
} 
.edit-block { 
    background: #272822; 
    width: 20%; 
    height: 100vh; 
    float: right; 
    color: white; 
    font-family: 'Scada', sans-serif;   
    padding: 20px; 
    display: none; 
    position: fixed; 
top: 0; 
right: 0; 
} 
.edit-block span { 
    font-size: 1.3em; 
} 
.minicolors-theme-default .minicolors-input { 
    height: 29px !important; 
    padding-left: 30px !important; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Site Bilder</title> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Scada:400,700&amp;subset=cyrillic" rel="stylesheet">  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> 
    <script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css"> 
</head> 
<body> 
 
  <span class="add" onclick="showElement()"></span> 
 
<div class="choose-option"> 
      
<div class="flex-close-title"> 
<div class="insert-txt-block">Добавить элементы</div> 
     <span class="close" onclick="showElement()"></span> 
</div> 
      <ul class="type-insert"> 
      <li class="btn-txt" onclick="showTextWindow()">Текст</li> 
      </ul> 
 
      </div> 
 
      <div class="modal-txt-container"> 
<div class="modal-insert-txt"> 
<h2>Вставить текст</h2> 
<hr> 
          <span>Тип Текста</span> 
           <div class="form-group"> 
          <select class="select-txt"> 
            <option value="ordinary" selected>Обычный текст</option> 
            <option value="h1">h1</option> 
            <option value="h2">h2</option> 
            <option value="h3">h3</option> 
            <option value="h4">h4</option> 
            <option value="h5">h5</option> 
            <option value="h6">h6</option> 
          </select> 
        </div> 
         
          <span>Выравнивание текста</span> 
          <div class="form-group">   
          <select class="form-align"> 
            <option value="left">Слева</option> 
            <option value="center">По центру</option> 
            <option value="right">Справа</option> 
          </select> 
        </div> 
 
         <div class="modal-footer"> 
        <button type="button" class="btn-insert-txt" onclick="addText()">Вставить текст</button> 
      </div> 
      </div> 
        </div> 
 
 
    <div class="preview"> 
 
 
</div> 
 
<div class="edit-block"> 
<div class="wrap"> 
      <span class="title"> 
Тип текста 
</span><br> 
<div  class="form-group-txt"> 
          <select id="typeEdit" class="select-txt-type"> 
            <option value="span" selected>Обычный текст</option> 
            <option value="h1">h1</option> 
            <option value="h2">h2</option> 
            <option value="h3">h3</option> 
            <option value="h4">h4</option> 
            <option value="h5">h5</option> 
            <option value="h6">h6</option> 
          </select> 
        </div> 
 
        <span class="title">Выравнивание текста</span> 
          <div class="form-group">   
          <select class="form-align"> 
            <option value="left">Слева</option> 
            <option value="center">По центру</option> 
            <option value="right">Справа</option> 
          </select> 
        </div> 
 
        <span class="title"> 
Стили текста 
</span><br> 
<div class="form-group"> 
          <select class="select-txt"> 
            <option value="ordinary" selected>Обычный текст</option> 
            <option value="bolder">Жирный шрифт</option> 
            <option value="oblique">Наклонный шрифт</option> 
            <option value="italic ">Курсив</option> 
            <option value="lighter">Светлое начертание</option> 
          </select> 
        </div> 
 
        <span class="title"> 
Шрифт 
</span><br> 
<div class="form-group"> 
          <select class="select-txt"> 
            <option value="ordinary" selected>Обычный текст</option> 
            <option value="bolder">Жирный шрифт</option> 
            <option value="oblique">Наклонный шрифт</option> 
            <option value="italic ">Курсив</option> 
            <option value="lighter">Светлое начертание</option> 
          </select> 
        </div> 
        <span class="title"> 
Цвет 
</span><br> 
        <input type="text" id="hue" class="color" data-control="hue"> 
      </div> 
</div> 
 
  <script src="js/app.js"></script>   
</body> 
</html>