Как вывести блоки при клике?

Слева выпадающий список, при клике на пункт в выпадающем списке, пункт появляется в инпуте. Подскажите как вывести этот же пункт справа при клике. И если в инпуте его удалять то и справа в блоке он удаляется. Спасибо

const typesSelect = document.querySelector('.types-select');

if (typesSelect) {
    //Данные по содержанию меню
    const furnTypes = [
        {
            'id': 1,
            'title': 'Встраиваемая стиральная/посудомоечная машина, шт',
            'price': '1700',
        },
        {
            'id': 2,
            'title': 'Электрическая панель (независимая), шт',
            'price': '750',
        },
        {
            'id': 3,
            'title': 'Электрический шкаф (независимый) , шт',
            'price': '1050',
        },
        {
            'id': 4,
            'title': 'Электрическая плита , шт',
            'price': '1100',
        },
        {
            'id': 5,
            'title': 'Электрическая панель и шкаф (независимые)',
            'price': '1500',
        },
        {
            'id': 6,
            'title': 'Встраиваемая вытяжка, шт',
            'price': '1250',
        },
        {
            'id': 7,
            'title': 'Плоская вытяжка, шт',
            'price': '1250',
        },
        {
            'id': 8,
            'title': 'Плоская вытяжка, шт',
            'price': '1250',
        },
    ];

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

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

    //Строим меню на основе данных items, вставляем в target
    //на элементы вешаем событие clickHandler
    function 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");
                const childTextBlock_2 = document.createElement("div");

                childTextBlock.classList.add('types-select__option-text');
                childTextBlock_2.classList.add('types-select__option-price');
                // Лучше потом на setHtml заменить, но пока нет поддержки
                childTextBlock.innerHTML = item['title'];
                childTextBlock_2.innerHTML = item['price'];
                childLi.appendChild(childTextBlock);
                childLi.appendChild(childTextBlock_2);
                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.classList.add("icon-close");
            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 => {
        document.querySelector('.types-select__menu').classList.toggle("_active");
    })
    window.addEventListener('click', e => {
        const target = e.target
        if (!target.closest('.types-select')) {
            document.querySelector('.types-select__menu').classList.remove("_active");
        }
    })
}
.select {
     position: relative;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 .select__menu._active .select__icon {
     transform: rotate(-180deg);
}
 .select__menu._active .select__body {
     display: block;
}
 .select__menu._active .select__options {
     opacity: 1;
     pointer-events: auto;
}
 .select__menu._active .select__btn {
     z-index: 7;
}
 .select__btn {
     display: flex;
     align-items: center;
     height: 53px;
     background: #fff;
     position: relative;
     border: 1px solid #e1e1eb;
     border-radius: 10px;
     padding: 15px 45px 15px 20px;
}
 .select__btntext {
     width: 100%;
}
 .select__input {
     cursor: pointer;
     width: 100%;
     font-weight: 450;
     color: #222;
     font-size: 16px;
     background: #fff;
}
 .select__icon {
     cursor: pointer;
     position: absolute;
     top: 23px;
     right: 25px;
     transition: all 0.3s ease 0s;
}
 .select__icon::before {
     font-size: 7px;
     color: #f5912d;
}
 .select__body {
     outline: none;
     display: none;
     position: absolute;
     top: 54px;
     left: 0;
     width: 100%;
     z-index: 5;
}
 .select__options {
     height: 360px;
     background: #fff;
     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;
}
 .select__options::-webkit-scrollbar {
     display: none;
}
 .select__option {
     cursor: pointer;
     font-weight: 400;
     font-size: 14px;
     padding: 16px 20px;
     transition: all 0.3s ease 0s;
     display: block;
     border-bottom: 1px solid #f0f0f0;
}
 .select__option:last-child {
     border-bottom: none;
}
 .select__option:hover {
     background: #f8f8fa;
}
 .select__option-text {
     display: flex;
     align-items: center;
}
 .select__option-text span {
     color: #f5912d;
}
 .types-select {
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 .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: 147px;
     background: #fff;
     position: relative;
     border: 1px solid #e1e1eb;
     border-radius: 10px;
     padding: 9.5px 45px 9.5px 17.5px;
}
 .types-select__active-items {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
     color: #91919b;
}
 .types-select__active-items div {
     display: flex;
     align-items: center;
     margin: 2.5px;
     padding: 0px 0px 0px 0px;
     background: #32695f;
     border-radius: 5px;
     font-weight: 450;
     color: #222;
     font-size: 14px;
     color: #fff;
     flex: 0 1 auto;
     padding: 10px 12px;
}
 .types-select__active-items div button::before {
     width: 12px;
     height: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
     font-size: 10px;
     margin: 0px 0px 0px 10px;
     transition: all 0.3s ease 0s;
}
 .types-select__active-items div button:hover::before {
     color: #aeacac;
}
 .types-select__icon {
     cursor: pointer;
     position: absolute;
     top: 45%;
     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: 100%;
     left: 0;
     width: 100%;
     z-index: 5;
}
 .types-select__options {
     height: 360px;
     background: #fff;
     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 {
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     font-weight: 400;
     font-size: 14px;
     padding: 16px 20px;
     transition: all 0.3s ease 0s;
     border-bottom: 1px solid #f0f0f0;
}
 .types-select__option:last-child {
     border-bottom: none;
}
 .types-select__option:hover {
     background: #f8f8fa;
}
 .types-select__option-price {
     font-weight: 450;
     font-size: 14px;
     color: #f5912d;
     margin: 0px 0px 0px 20px;
}
 .types-select__option-text {
     display: flex;
     align-items: center;
     pointer-events: none;
}
 .types-select__option-text span {
     color: #f5912d;
}

button{
  background:transparent;
  border:none;
}

button::before{
  content:'X';
  cursor:pointer;
}

.content{
  display:flex;
}
.left-form-calculator__select{
  flex: 0 1 50%;
  margin: 0px 50px 0px 0px;
}
.right-form-calculator__body{
   flex: 0 1 30%;
}

.right-form-calculator__column{
  padding: 7px 0px;
        display: flex;
        justify-content: space-between;
}
<div class="content">
  <div class="left-form-calculator__select select types-select">
    <div class="types-select__menu">
      <div data-simplebar class="types-select__btn">
        <div class="types-select__active-items">
          Выберите услугу
        </div>
        <div class="types-select__icon"></div>
      </div>
      <div id='furnitureMenu' class="types-select__body">
      </div>
    </div>
  </div>

  <div class="right-form-calculator__body">
    <div class="right-form-calculator__column">
      <div class="right-form-calculator__name name-service">
       Встраиваемая стиральная/посудомоечная машина
      </div>
      <div class="right-form-calculator__cost service">1700</div>
    </div>
  </div>
</div>


Ответы (0 шт):