为什么将样式添加到所有对象，而不是选择的对象

Question

我有一个创建块的按钮。当我单击按钮时，将弹出一个窗口，其中包含此块的设置。而且我有此块位置的设置。当我创建块并正确设置主题位置时，一切正常。但是，当添加另一个块并给左位置时，将左赋给第一个和第二个块，而不赋给第二个。为什么？

function showBlockWindow() {
  var modal = $(".modal-block-container");
  if (modal.css('display', "none")) {
    modal.css('display', "grid");
  } else {
    modal.css('display', "none");
  }
}

function addBlock() {
  var widthInp = $("#width").val();
  var heightInp = $("#height").val();
  var align = $(".form-align-block").val();
  var background = "background-color:";
  var backgroundColor = "black";
  var closeTag = ";";
  var width = "width:";
  var percent = "%";
  var px = "px";
  var onclick = 'onclick="editBlock(this)"';
  var margin = "margin:";
  var height = "height:";
  var block = ("<div class='block-" + align + " preview-block' " + onclick + " style=" + background + backgroundColor + closeTag + width +
    widthInp + percent + closeTag + height + heightInp + px + "></div>");

  $(".preview").append(block);

  if (align == "left" || "right") {
    $(".preview .preview-block").css("margin-" + align + "", "auto");
  } else if (align == "center") {
    $(".preview .preview-block").css("margin", "auto");
  }
}

function editBlock(elem) {
  $('.preview-block').removeClass('preview-block');
  $(elem).addClass('preview-block');
  $('.preview-edit-block').show();
}

.addBlock {
  font-size: 1.2em;
  list-style: none;
  transition: 0.1s;
  padding: 5px;
}

.modal-block-container {
  justify-content: center;
  right: 0;
  left: 0;
  position: fixed;
  top: 15%;
  display: none;
}

.input-block {
  padding-bottom: 2%;
  padding-top: 1%;
}

#width,
#height {
  padding: 4px;
  font-family: 'Scada', sans-serif;
}

.edit-block-modal {
  padding-bottom: 2%;
}

.preview-edit-block {
  background: #272822;
  width: 20%;
  height: 100vh;
  float: right;
  color: white;
  font-family: 'Scada', sans-serif;
  padding: 20px;
  display: none;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="add-block">
  <li class="addBlock" onclick="showBlockWindow()">Пустой блок</li>
</ul>
<div class="modal-block-container">
  <div class="modal-insert-txt">
    <div class="header-modal">
      <h2>Вставить пустой блок</h2>
    </div>
    <hr>
    <div class="edit-block-modal">
      <span>Ширина</span><br>
      <div class="input-block">
        <input type="text" id="width"> %
      </div>

      <span>Длина</span><br>
      <div class="input-block">
        <input type="text" id="height"> px
      </div>
      <span>Выравнивание блока</span>
      <div class="form-group">
        <select class="form-align-block">
          <option value="left">Слева</option>
          <option value="center">По центру</option>
          <option value="right">Справа</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn-insert-txt" onclick="addBlock()">Вставить текст</button>
    </div>
  </div>
</div>


<div class="preview">


</div>


<div class="preview-edit-block">

</div>

请帮助我