Monthly / Yearly pricing slider not refreshing on yearly selection

I have 2 days experience with HTML, CSS and JS on front-end development.

After reading lots I have been able to do the following. The thing is that it is refreshing when selecting the Monthly, but not on the Yearly, which is the one selected from the beginning.

This is the code I have been working on:

const switchMonthly = document.getElementById('switchMonthly');
const switchYearly = document.getElementById('switchYearly');
const flexy = document.getElementById('flexy');

switchMonthly.addEventListener('change', e => {
  flexy.classList.toggle('show-annually');
  flexy.classList.toggle('show-monthly');
})
switchYearly.addEventListener('change', e => {
  flexy.classList.toggle('show-monthly');
  flexy.classList.toggle('show-annually');
})

.show-monthly .price-box .monthly {
  display: none;
}

.show-monthly .price-box .annually {
  display: block;
}

.show-annually .price-box .monthly {
  display: block;
}

.show-annually .price-box .annually {
  display: none;
}

<input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" />
<input type="radio" id="switchYearly" name="switchPlan" value="Yearly" checked="checked" />
<label for="switchMonthly">Monthly</label>
<label for="switchYearly">Yearly</label>
<div class="switch-wrapper">
  <div class="switch">
    <div>Monthly</div>
    <div>Yearly</div>
  </div>
</div>
</div>

<div id="flexy" class="flex">
  <div class="price-box">
    <p>
      <span class="monthly">
                         19.99
                    </span>
      <span class="annually">
                         199.99
                    </span>
    </p>
  </div>
</div>

As expressed, the problem is that on the “yearly” it always shows both pricing options.