Как выводить несколько значений подряд при клике?
Есть селект, при клике выводится значение, подскажите как вывести множество значений как на на картинке: https://i.stack.imgur.com/GBdV0.png. И при клике на значение что-бы оно могло удаляться? Спасибо
function selectServer() {
const optionMenusTypes = document.querySelectorAll('.types-select__menu');
optionMenusTypes.forEach(optionMenuType => {
const selectBtnType = optionMenuType.querySelector('.types-select__btn');
const optionsType = optionMenuType.querySelectorAll('.types-select__option');
const sBtntextType = optionMenuType.querySelector('.types-select__btntext');
if (optionMenuType) {
selectBtnType.addEventListener("click", function (e) {
let elem_active = optionMenuType.classList.contains("_active")
optionMenusTypes.forEach(opt => {
opt.classList.remove('_active');
})
optionMenuType.classList.toggle("_active", !elem_active)
});
optionsType.forEach(option => {
option.addEventListener("click", function (e) {
if (e.target.classList.contains('.types-select__option-text') != null) {
const selectedOption = option.querySelector('.types-select__option-text').innerText;
sBtntextType.innerText = selectedOption;
};
optionsType.forEach(el => { el.classList.remove('_active'); });
option.classList.add("_active");
optionMenuType.classList.remove("_active")
});
});
window.addEventListener('click', e => {
const target = e.target
if (!target.closest('.types-select__options') && !target.closest('.types-select__menu')) {
optionMenuType.classList.remove("_active")
}
})
}
})
}
selectServer()
.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;
}
.types-select__option-text span {
color: #f5912d;
}
<div class="left-form-calculator__select select types-select">
<div class="types-select__menu">
<div class="types-select__btn">
<div class="types-select__btntext">
</div>
<div class="types-select__icon _icon-arrow"></div>
</div>
<div class="types-select__body">
<ul class="types-select__options">
<li class="types-select__option">
<div class="types-select__option-text">Офисная <span>меб</span>ель</div>
</li>
<li class="types-select__option">
<div class="types-select__option-text">Техника / сантехника</div>
</li>
<li class="types-select__option">
<div class="types-select__option-text">Сборка кухни</div>
</li>
</ul>
</div>
</div>
</div>