<!-- 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 {
  display: flex;
  margin: 1rem;

  &-fruit {
    
    &:not(.hidden) ~ &:not(.hidden) { // select the second of two visible items
      &:before {
        content: ', '; // and put a comma before it
      }
    }

    &.hidden {
      display: none;
    }
  }
}


// a little fancier, uses transitions
.veggies {
  padding-inline-start: 0;
  list-style: none;
  margin: 1rem;
  display: flex;
  
  &-veggie {
    display: flex;
    position: relative;
    max-width: 0;
    opacity: 0;
    transition: max-width .25s, opacity .25s, margin .25s;
    
    &:before {
      content: ',';
      display: block;
      vertical-align: baseline;
      opacity: 0;
      transition: opacity .5s;
      margin: 0 .25rem 0 -.5rem;
    }
    
    &.on {
      max-width: 100px; // set this close to the widest possible item
      opacity: 1;
      margin-right: .5rem;
    }
    
    &.on ~ &.on { 
      &:before {
        opacity: 1;
      }
    }
  }
}

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');
  });
});