<div class="wrapper">
  <div class="pp_select">
      <div class="pp_selected">Выберите</div>
      <div class="pp_options">
          <span>Первый пункт</span>
          <span>Второй пункт</span>
      </div>
  </div>
</div>
    
<button class="add_btn">Добавить</button>
.pp_select {
    position: relative;
    display: block;
    margin: 15px 0;
    width: 170px;
}
 .pp_selected {
     display: inline-block;
     border: 2px solid #333;
     padding: 5px 30px 5px 10px;
     width: 100%;
     cursor: pointer;
     user-select: none;
     position: relative;
 }
 .pp_selected:after {
     content: "";
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5Mi4wMDQgNDkyLjAwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkyLjAwNCA0OTIuMDA0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KC0xLjgzNjk3ZS0xNiAxIC0xIC0xLjgzNjk3ZS0xNiA0OTIuMDA0IDguNTI2NTFlLTE0KSI+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzgyLjY3OCwyMjYuODA0TDE2My43Myw3Ljg2QzE1OC42NjYsMi43OTIsMTUxLjkwNiwwLDE0NC42OTgsMHMtMTMuOTY4LDIuNzkyLTE5LjAzMiw3Ljg2bC0xNi4xMjQsMTYuMTIgICAgYy0xMC40OTIsMTAuNTA0LTEwLjQ5MiwyNy41NzYsMCwzOC4wNjRMMjkzLjM5OCwyNDUuOWwtMTg0LjA2LDE4NC4wNmMtNS4wNjQsNS4wNjgtNy44NiwxMS44MjQtNy44NiwxOS4wMjggICAgYzAsNy4yMTIsMi43OTYsMTMuOTY4LDcuODYsMTkuMDRsMTYuMTI0LDE2LjExNmM1LjA2OCw1LjA2OCwxMS44MjQsNy44NiwxOS4wMzIsNy44NnMxMy45NjgtMi43OTIsMTkuMDMyLTcuODZMMzgyLjY3OCwyNjUgICAgYzUuMDc2LTUuMDg0LDcuODY0LTExLjg3Miw3Ljg0OC0xOS4wODhDMzkwLjU0MiwyMzguNjY4LDM4Ny43NTQsMjMxLjg4NCwzODIuNjc4LDIyNi44MDR6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiMzMzMzMzMiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPg==);
     background-repeat: no-repeat;
     background-size: contain;
     height: 13px;
     width: 13px;
     top: 0; right: 5px; bottom: 0;
     margin: auto;
     position: absolute;
 }
 .pp_options {
     display: none;
     position: absolute;
     top: 100%; left: 0;
     width: 100%;
     background-color: #fff;
     z-index: 1;
 }
.pp_options.active {
    display: inline-block;
}
 .pp_options span {
     display: block;
     padding: 5px 10px 5px 10px;
     margin-top: -1px;
     border: 1px solid #333;
     cursor: pointer;
     user-select: none;
 }
.pp_options span:hover {
    background-color: #dedede;
}
document.addEventListener('click', ({target}) => {
  if (target && target.classList.contains('pp_selected')) {
    // Открываем\Закрываем список
    target.parentNode.querySelector('.pp_options').classList.toggle('active');
  }
  if (target && target.parentNode.classList.contains('pp_options')) {
    // Вставляем выбранный элемент в selected
    target.parentNode.classList.toggle('active');
    target.parentNode.parentNode.querySelector('.pp_selected').innerHTML = target.innerHTML;
  }
});


// Добавление нового select
let addBtn = document.querySelector('.add_btn');
let wrapper = document.querySelector('.wrapper');

addBtn.addEventListener('click', () => {
  createSelect();
});


function createSelect() {
  let selectBlock = document.createElement('div');
  selectBlock.classList = 'pp_select';

  let selected = document.createElement('div');
  selected.classList = 'pp_selected';
  selected.innerHTML = 'Выберите';
  selectBlock.append(selected);

  let options = document.createElement('div');
  options.classList = 'pp_options';

  let option1 = document.createElement('span');
  option1.innerHTML = 'Первый';
  let option2 = document.createElement('span');
  option2.innerHTML = 'Второй';
  
  options.append(option1, option2);
  selectBlock.append(options);
  wrapper.append(selectBlock);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.