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

<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 bold">
      <div class="right-form-calculator__name name-service">Общая сумма:</div>
      <div class="right-form-calculator__cost service">0&nbsp;&#8381;</div>
      </div>
  </div>
</div>

.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;
   /*min-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:empty:before {
  content: "Выберите услугу";
}
 .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;
   user-select: none;
}
 .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;
   user-select: none;
}
 .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.active {
  cursor: default;
  background-color: #dedede;
}
.types-select__option.active .types-select__option-price {
  color: black;
}
 .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;
}
.right-form-calculator__name {
  padding-right: 15px;
}
.bold {
  font-weight: bold;
}

.red {
  color: red;
}

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")))) {
      //Если поменялся перестроим меню
      e.target.classList.add('active');
      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'] + '&nbsp;&#8381;';
        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'),
          parentRight = document.querySelector('.right-form-calculator__body');
    parent.innerHTML = parentRight.innerHTML = '';
    
    // Переменная общей суммы
    let priceSum = 0;
    
    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']);
      let tplItem = `<div class="right-form-calculator__name name-service">${curItem['title']}</div><div class="right-form-calculator__cost service">${curItem['price']}&nbsp;&#8381;</div>`;
      const rightMenuEl = document.createElement("div");
      rightMenuEl.classList.add('right-form-calculator__column');
      rightMenuEl.dataset.id = curItem['id'];
      rightMenuEl.innerHTML = tplItem
      parentRight.append(rightMenuEl);
      
      // Суммируем
      priceSum = priceSum + parseFloat(curItem['price']);
      
      activeMenuItemdeleteButtonEl.addEventListener("click", e => {
        //Чтобы кликалась не взирая на клик событие родителя
        if (e && e.stopPropagation) e.stopPropagation();
        let idAf = parseInt(e.target.getAttribute("active-furn-id"));
        if (activeMenuItems.delete(parseInt(e.target.getAttribute("active-furn-id")))) {
          let li = typesSelect.querySelector('[furn-id="'+idAf+'"]');
          li && li.classList.remove('active');
          //Если поменялся перестроим меню
          updateActiveMenuItems(activeMenuItems);
        }
      });

      activeMenuItemEl.appendChild(activeMenuItemTitleEl);
      activeMenuItemEl.appendChild(activeMenuItemdeleteButtonEl);
      parent.appendChild(activeMenuItemEl);
    })
    
      // Выводим общую сумму
    //if(priceSum) {
      const rightMenuEl = document.createElement("div");
      rightMenuEl.classList.add('right-form-calculator__column');
      rightMenuEl.classList.add('bold');
      // Если сумма больше 0, то красим в красный
      priceSum && rightMenuEl.classList.add('red');
      let tplItem = `<div class="right-form-calculator__name name-service">Общая сумма:</div><div class="right-form-calculator__cost service">${priceSum}&nbsp;&#8381;</div>`;
      rightMenuEl.innerHTML = tplItem;
      parentRight.append(rightMenuEl);
    //}
  }

  // Строим меню
  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");
    }
  })
}

This Pen is owned by ProjectSoft on CodePen. It is a fork of this Pen.

See more by @ProjectSoft on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.