querySelector returns the first result. You can only have one item with an id. You can not update an collection, you have to loop over each one.

document.querySelector("#toggle").addEventListener("click", function() {
  document.querySelectorAll(".price-yearly, .price-monthly")
    .forEach(function(elem) {
      elem.classList.toggle('hidden')
    })
})

.hidden { display: none; }

<div class="plans">
  <div class="price-monthly">Monthly 1</div>
  <div class="price-yearly hidden">Yearly 1</div>
  <div class="price-monthly">Monthly 2</div>
  <div class="price-yearly hidden">Yearly 2</div>
  <div class="price-monthly">Monthly 3</div>
  <div class="price-yearly hidden">Yearly 3</div>
  <div class="price-monthly">Monthly 4</div>
  <div class="price-yearly hidden">Yearly 4</div>
  <div class="price-monthly">Monthly 5</div>
  <div class="price-yearly hidden">Yearly 5</div>
</div>

<button id="toggle" type="button">toggle</button>

But there is a 100% better way of doing it, add a class to a parent element.

document.querySelector("#toggle").addEventListener("click", function () {
  document.querySelector(".plans").classList.toggle('yearly')
})

.plans .price-yearly {
  display: none;
}

.plans.yearly .price-yearly {
  display: block;
}

.plans.yearly .price-monthly {
  display: none;
}

<div class="plans">
  <div class="price-monthly">Monthly 1</div>
  <div class="price-yearly">Yearly 1</div>
  <div class="price-monthly">Monthly 2</div>
  <div class="price-yearly">Yearly 2</div>
  <div class="price-monthly">Monthly 3</div>
  <div class="price-yearly">Yearly 3</div>
  <div class="price-monthly">Monthly 4</div>
  <div class="price-yearly">Yearly 4</div>
  <div class="price-monthly">Monthly 5</div>
  <div class="price-yearly">Yearly 5</div>
</div>

<button id="toggle" type="button">toggle</button>

I’ve created a vue component so I can toggle through some pricing options, but I’m not sure how best to loop through all options.

I can loop through the first item using this

methods: {
  toggle() {
    this.isEnabled = !this.isEnabled;
    let priceMonthly = document.querySelectorAll(".price-monthly");
    let priceYearly = document.querySelectorAll(".price-yearly");
    priceMonthly.classList.toggle("hidden");
    priceYearly.classList.toggle("hidden");
  }
}

I’ve tried this as a way to loop through all prices in the plans div

methods: {
  toggle() {
    this.isEnabled = !this.isEnabled;
    function togglePrice() {
      let plans = document.querySelector("#plans");
      let priceMonthly = document.querySelectorAll(".price-monthly");
      let priceYearly = document.querySelectorAll(".price-yearly");

      for (var i = 0; i < plans.length; i++) {
        priceMonthly.classList.toggle("hidden");
        priceYearly.classList.toggle("hidden");
      }
    }

    togglePrice();
  }
}

This is how I set the pricing in the planItem component:

<span class="text-4xl font-bold price-monthly">{{ planMonthlyPrice }}</span>
<span class="text-4xl font-bold price-yearly hidden">{{ planYearlyPrice }}</span>

and here is the main div in the plan component:

<div id="plans" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 flex-wrap gap-4 mt-24">
   <slot></slot>
</div>