Remove selected class from previous option in dropdown javascript

I have both a dropdown select option and some buttons both containing the same values.

When I select an option from my dropdown I want the button with the same value to add a class of selected and when I select another option from my dropdown I want it to remove the class of selected from the previous selection and add it to the new value.

For now I've only managed to get it to show a class of selected but it won't remove this class from the previous option once I've selected a new one, does anyone know how I go about doing this please?

I only want to use vanilla JS for this, no jQuery please.

code below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const btn = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function(){
    btn.forEach(x => {
        if (x.getAttribute('data-value') == this.value) {
            x.classList.add('selected');
        }
    });
});

<!-- language: lang-css -->

.btn-num.selected {
  background-color: green;
  color: #fff;
}

<!-- language: lang-html -->

<div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
    <div class="btn-num" data-value="1">
        1
    </div>

    <div class="btn-num" data-value="2">
        2
    </div>

    <div class="btn-num" data-value="3">
        3
    </div>

    <div class="btn-num" data-value="4">
        4
    </div>
</div>

<!-- end snippet -->

You forgot to remove class. Use x.classList.remove()

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const btn = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function() {
    btn.forEach(x => {
        x.classList.remove('selected'); 
        if (x.getAttribute('data-value') == this.value) {
            x.classList.add('selected'); 
        }
    });
});

<!-- language: lang-css -->

.btn-num.selected {
  background-color: green;
  color: #fff;
}

<!-- language: lang-html -->

<div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
    <div class="btn-num" data-value="1">
        1
    </div>

    <div class="btn-num" data-value="2">
        2
    </div>

    <div class="btn-num" data-value="3">
        3
    </div>

    <div class="btn-num" data-value="4">
        4
    </div>
</div>

<!-- end snippet -->

If you wanted to remove class only from the currently .selected item us can us ?. syntax is used to check if element .selected exists and remove the class only form the specific element
:

document.querySelector(".selected")?.classList.remove("selected")

To remove the selected class you just need to add x.classList.remove('selected'); right before your conditional check.

It's fairly simple. Others explained it already. I wrote it slightly differently, but it doesn't make a difference. It's really just adding the classList.remove('selected') method. Maybe my version will help anyway.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const dropDown = document.querySelector('.dropdown'),
      dropDownOptions = dropDown.querySelectorAll('option'),
      optionsContainer = document.querySelector('.options'),
      optionsDisplay = optionsContainer.querySelectorAll('.btn-num')
      
dropDown.addEventListener('change', (e) => {

  const selectedOption = e.target.value
  
  optionsDisplay.forEach(option => {
  
    option.classList.remove('selected')
    
    if (option.dataset.value === selectedOption)
      option.classList.add('selected')
  
  })

})

<!-- language: lang-css -->

main {
  padding: 2rem;
  display: grid;
  grid-auto-flow: row;
  gap: 2rem;
  font-family: monospace;
  font-weight: 900;
  font-size: 2rem;
}

#dropdown-container {
  background-color: hsl(156 75% 90%);
  padding: 1rem;
  border-radius: 1rem;
}

.options {
  background-color: hsl(287 75% 90%);
  padding: 1rem;
  border-radius: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.btn-num {
  padding: 0.25rem 0.75rem;
  background-color: black;
  color: hsl(287 75% 90%);
  border-radius: 0.5rem;
}

.btn-num.selected {
  background-color: white;
  color: hsl(287 75% 50%);
  box-shadow: 0 0.125rem 1rem hsl(215 50% 15% / 0.15);
  text-shadow: 0 0.125rem 0.5rem hsl(215 50% 15% / 0.5)
}

<!-- language: lang-html -->

<main>

  <div id="dropdown-container">    
    <select class="dropdown">       
      <option value="" selected="" disabled="">Numbers</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

  <div class="options">
    <div class="btn-num" data-value="1">
      1
    </div>

    <div class="btn-num" data-value="2">
      2
    </div>

    <div class="btn-num" data-value="3">
      3
    </div>

    <div class="btn-num" data-value="4">
      4
    </div>
  </div>

</main>

<!-- end snippet -->

for shorter code use classList.toggle() method

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const 
  btns     = document.querySelectorAll(".btn-num")
, dropDown = document.querySelector('#dropdown-container .dropdown')
  ;
dropDown.addEventListener("change", function() { 
  btns.forEach( bt =>
    bt.classList.toggle('selected', bt.dataset.value===this.value ));
  });

<!-- language: lang-css -->

.btn-num.selected {
  background : green;
  color      : #fff;
  }

<!-- language: lang-html -->

<div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
  <div class="btn-num" data-value="1"> 1 </div>
  <div class="btn-num" data-value="2"> 2 </div>
  <div class="btn-num" data-value="3"> 3 </div>
  <div class="btn-num" data-value="4"> 4 </div>
</div>

<!-- end snippet -->