<!-- using divs and spans -->
<button class='randomize-fruits'>Random Fruits</button>
<div class='fruits'>
  <span class='fruits-fruit'>Banana</span>
  <span class='fruits-fruit'>Apple</span>
  <span class='fruits-fruit'>Orange</span>
  <span class='fruits-fruit'>Pear</span>
  <span class='fruits-fruit'>Nectarine</span>
</div>

<!-- using and unordered list -->
<button class='randomize-veggies'>Random Veggies</button>
<ul class='veggies'>
  <li class='veggies-veggie on'>Broccoli</li>
  <li class='veggies-veggie on'>Carrots</li>
  <li class='veggies-veggie on'>Potatoes</li>
  <li class='veggies-veggie on'>Spinach</li>
  <li class='veggies-veggie on'>Turnips</li>
</ul>

.fruits {
  margin: 1rem;
  span::after {
    display: inline;
    content: ", ";
  }
  span:last-of-type::after {
    display: none;
  }
}

.veggies {
  margin: 1rem;
  padding: 0;
  li {
    display: inline;
  }
  li::after {
    display: inline;
    content: ", ";
  }
  li:last-of-type::after {
    display: none;
  }
}

const fruits = Array.from(document.querySelectorAll('.fruits-fruit'));

const veggies = Array.from(document.querySelectorAll('.veggies-veggie'));

document.querySelector('.randomize-fruits').addEventListener('click', () => {
  fruits.forEach(fruit => {
    fruit.classList[Math.random() < .5 ? 'add' : 'remove']('hidden');
  });
});

document.querySelector('.randomize-veggies').addEventListener('click', () => {
  veggies.forEach(veggie => {
    veggie.classList[Math.random() < .5 ? 'add' : 'remove']('on');
  });
});