JS multiselect с кнопками удаления выбранных option

let fieldMultiselect = document.querySelectorAll(".field_multiselect"),
  multiselect = document.querySelectorAll(".field_select");


multiselect.forEach((select) => {

  select.addEventListener("change", function(element) {
    let valueName = this.value;
    let multiselectField = this.parentElement.children[0];
    multiselectField.innerHTML = '<button class="btn_multiselect" type="button">' + valueName + '</button>';

    console.log("valueName", valueName);
  })
});

body {
  margin: 0;
}

.form_label {
  position: relative;
  min-height: 88px;
}

.form_text {
  vertical-align: top;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .04em;
  color: #686EA1
}

.form_text>sup {
  position: relative;
  top: 0;
  font-size: 13px;
}

.field_multiselect {
  position: relative;
  width: 100%;
  display: block;
  border: 1px solid #CDD6F3;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 12px 40px 10px 16px;
  outline-color: #CDD6F3;
}

.field_multiselect::placeholder {
  color: #A8ACC9;
}

.form_label input.error {
  border-color: $red;
}

.field_multiselect {
  padding-right: 60px;
}

.field_multiselect:after {
  content: "";
  position: absolute;
  right: 14px;
  top: 15px;
  width: 6px;
  height: 16px;
  background: url("../images/svg-icons/two-arrows.svg") 50% 50% no-repeat;
}

.multiselect_block {
  position: relative;
  width: 100%;
}

.field_select {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 100%;
  border: 2px solid #CDD6F3;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  box-sizing: border-box;
  outline-color: #CDD6F3;
}

.field_select[multiple] {
  overflow-y: auto;
}

.field_select option {
  display: block;
  padding: 8px 16px;
  width: calc(370px - 32px);
}

.field_select option:checked {
  background-color: #ECEFF3;
}

.field_multiselect button {
  position: relative;
  padding: 7px 34px 7px 8px;
  background: #EBE4FB;
  border-radius: 4px;
}

.field_multiselect button:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  background: url("../images/svg-icons/icon-close.svg") 50% 50% no-repeat;
  background-size: contain;
}

.multiselect_label {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 100%;
  height: 44px;
  //background-color: #f00;  /// for test
  z-index: 3;
}

.field_select {
  display: none;
}

input.multiselect_checkbox {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border: none;
  opacity: 0;
}

.multiselect_checkbox:checked~.field_select {
  display: block;
}

.multiselect_checkbox:checked~.multiselect_label {
  width: 40px;
  left: initial;
  right: 4px;
  background: #fff url("../images/svg-icons/icon-close.svg") 50% 50% no-repeat;
}

<div class="form_label">
  <span class="form_text">Products<sup>*</sup></span>
  <div class="multiselect_block">
    <label for="select-1" class="field_multiselect">Products</label>
    <input id="checkbox-1" class="multiselect_checkbox" type="checkbox">
    <label for="checkbox-1" class="multiselect_label"></label>

    <select id="select-1" class="field_select" name="products" multiple style="height: calc(4 * 38px)">
      <option value="Applications">Applications</option>
      <option value="Parental controls">Parental controls</option>
      <option value="VPN">VPN</option>
      <option value="All">All</option>
    </select>
  </div>
</div>