<div class="left-form-calculator__select select types-select">
  <div class="types-select__menu">
    <div class="types-select__btn">
      <div class="types-select__active-items">
      </div>
      <div class="types-select__icon _icon-arrow"></div>
    </div>
    <div id='furnitureMenu' class="types-select__body">      
    </div>
  </div>
</div>

.types-select {
  position: relative;
}

.types-select__menu._active .types-select__icon {
  transform: rotate(-180deg);
}

.types-select__menu._active .types-select__body {
  display: block;
}

.types-select__menu._active .types-select__options {
  opacity: 1;
  pointer-events: auto;
}

.types-select__menu._active .types-select__btn {
  z-index: 7;
}

.types-select__btn {
  display: flex;
  align-items: center;
  height: 53px;
  background: #ffffff;
  position: relative;
  border: 1px solid #e1e1eb;
  border-radius: 10px;
  padding: 12px 45px 12px 20px;
}

.types-select__input {
  font-weight: 450;
  color: #191919;
  font-size: 16px;
  background: #ffffff;
  line-height: 1.1;
}

.types-select__icon {
  cursor: pointer;
  position: absolute;
  top: 23px;
  right: 25px;
  transition: all 0.3s ease 0s;
}

.types-select__icon::before {
  font-size: 7px;
  color: #f5912d;
}

.types-select__body {
  outline: none;
  display: none;
  position: absolute;
  top: 54px;
  left: 0;
  width: 100%;
  z-index: 5;
}

.types-select__options {
  height: 360px;
  background: #ffffff;
  filter: drop-shadow(0px 20px 40px rgba(25, 25, 25, 0.15));
  border-radius: 10px;
  overflow: auto;
  pointer-events: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.types-select__options::-webkit-scrollbar {
  display: none;
}

.types-select__option {
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.1;
  padding: 16px 20px;
  transition: all 0.3s ease 0s;
  display: block;
  border-bottom: 1px solid #f0f0f0;
}

.types-select__option:last-child {
  border-bottom: none;
}

.types-select__option:hover {
  background: #f8f8fa;
}

.types-select__option-text {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.types-select__option-text span {
  color: #f5912d;
}

.types-select__active-items {
  display: flex;
  gap: 10px;  
}

//Данные по содержанию меню
const furnTypes = [
  {
    'id' : 1,
    'title' : 'Офисная&nbsp;<span>меб</span>ель'
  },
  {
    'id' : 2,
    'title' : 'Техника / сантехника'
  },
  {
    'id' : 3,
    'title' : 'Сборка кухни'
  },
];

//Каждое активно может быть только один раз
const activeMenuItems =   new Set();

const clickHandler = e => {
  if(activeMenuItems.add(parseInt(e.target.getAttribute("furn-id"))) ) {
    //Если поменялся перестроим меню
    updateActiveMenuItems(activeMenuItems);
  }  
};

//Строим меню на основе данных items, вставляем в target
//на элементы вешаем событие clickHandler
buildSelectMenu = (target, items, clickHandler) => 
{
  //создаем родителя
  const parentUl = document.createElement("ul");
  parentUl.classList.add('types-select__options');
  //Каждый из пунктов
  items.forEach(
    item => {
      const childLi = document.createElement("li");
      childLi.classList.add('types-select__option');
      childLi.setAttribute('furn-id', item['id']);
      childLi.addEventListener("click",clickHandler);
      const childTextBlock = document.createElement("div");
      childTextBlock.classList.add('types-select__option-text');
      // Лучше потом на setHtml заменить, но пока нет поддержки
      childTextBlock.innerHTML = item['title'];
      childLi.appendChild(childTextBlock);
      parentUl.appendChild(childLi);
    }
  )
  //Запихиваем туда куда нужно
  target.appendChild(parentUl);  
  return parentUl; 
}

const updateActiveMenuItems = ids => {
  
  const parent = document.querySelector('.types-select__active-items');
  parent.innerHTML = '';
  ids.forEach( id => {
    const curItem = furnTypes.find( el => el['id'] === id)
    const activeMenuItemEl = document.createElement("div");
    const activeMenuItemTitleEl = document.createElement("span");
    activeMenuItemTitleEl.innerHTML = curItem['title'];
    const activeMenuItemdeleteButtonEl = document.createElement("button");
    //Лучше через текстовую ноду
    activeMenuItemdeleteButtonEl.innerHTML = 'x';
    activeMenuItemdeleteButtonEl.setAttribute('active-furn-id', curItem['id']);
    
    activeMenuItemdeleteButtonEl.addEventListener("click", e => {
      //Чтобы кликалась не взирая на клик событие родителя
      if(e && e.stopPropagation) e.stopPropagation();
      
      if(activeMenuItems.delete(parseInt(e.target.getAttribute("active-furn-id"))) ) {
        //Если поменялся перестроим меню
         updateActiveMenuItems(activeMenuItems);
      } 
    }); 
    
    activeMenuItemEl.appendChild(activeMenuItemTitleEl);
    activeMenuItemEl.appendChild(activeMenuItemdeleteButtonEl);
    parent.appendChild(activeMenuItemEl);
    
  })
  
}

// Строим меню
const furnitureMenu = buildSelectMenu(
  document.querySelector('#furnitureMenu'), 
  furnTypes, 
  clickHandler
);

document.querySelector('.types-select__btn')
  .addEventListener("click", e => {
    // Странное имя класса, наверное должн быть types-select__menu_active
    document.querySelector('.types-select__menu').classList.toggle("_active");
} )