I have a list of words. The words are in groups of 3 and the last one is a group of 4 words. I want to fadeIn and fadeOut each word like so:

-Word 1 appears, 0.5s later word 2 appears, 0.5s later (so 1s after word 1) word 3 appears.

-Word 1 disappears and instantly word 4 appears taking the place of word 1. Then word 2 disappears and instantly word 5 appears taking the place of word 2, and so on.

I want to display/show always 3 words (and 4 for the last group). I tried to do it, but the first word of each group disappears when the second appears and so on, and I need the first word of each group to hold till the last word of the group appears and then the first word of the next group takes the place of the first word of the previous group in a loop. I hope I was clear enough. Here you have an approach of what I have done.

https://codepen.io/andrecode/pen/qBmQwYe

<div id="words">  
<div>
  <span>Prévention</span>
  <span>Ray Charles</span>
  <span>Elvis Presley</span>
</div>
<div>
  <span>Sam Cooke</span>
  <span>John Lennon</span>
  <span>Marvin Gaye</span>
</div>
<div>
  <span>Bob Dylan</span>
  <span>Otis Redding</span>
  <span>Stevie Wonder</span>
</div>
<div>
  <span>James Brown</span>
  <span>Paul McCartney</span>
  <span>Little Richard</span>
  <span>Roy Orbison</span>

Thank you in advance!