<form action="/">
  
  <div class="select-block">
    <div class="select-main">Please choose one</div>
    <div class="select-choose">
      <ul>
        <li class="li">Select 1</li>
        <li class="li">Select 2</li>
        <li class="li">Select 3</li>
      </ul>
    </div>
  </div>
  
  <div class="select-block">
    <div class="select-main">Please choose again</div>
    <div class="select-choose">
      <ul>
        <li class="li">Select 1</li>
        <li class="li">Select 2</li>
        <li class="li">Select 3</li>
      </ul>
    </div>
  </div>
  
</form>
form {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.select-block {
  width: 150px;
}

.select-main {
  padding: 10px;
  background-color: #F90;
  cursor: pointer;
}

.select-choose {
  display: none;
  width: 150px;
  margin-top: 7px;
  
  ul {
    
  }
  
  li {
    background-color: #F60;
    padding: 5px 10px;
    cursor: pointer;
  }
}

.active-select-choose {
  display: block;
}
View Compiled
const selectBlocks = document.querySelectorAll('.select-block');
const activeClassName = 'active-select-choose';
selectBlocks.forEach(block => {
  
  const chooseElement = block.querySelector('.select-main'),
        chooseBlock = block.querySelector('.select-choose'),
        chooseBlockAll = document.querySelectorAll('.select-choose'),
        chooseItem = block.querySelectorAll('.select-choose li');
  
  chooseElement.addEventListener('click', () => {
    chooseBlockAll.forEach((item) => {
      if (item !== chooseBlock && item.classList.contains(activeClassName)) {
        item.classList.remove(activeClassName);
      }
    })
    console.log(chooseBlock.classList);
    if(chooseBlock.classList.contains(activeClassName)) {
      chooseBlock.classList.remove(activeClassName);
    } else {
      chooseBlock.classList.add(activeClassName);
    }
  })
  
  chooseItem.forEach((item) => {
    item.addEventListener('click', () => {
      chooseElement.innerText = item.innerText;
      chooseBlock.classList.remove(activeClassName);
    })
  })
  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.