Multi-Group jQuery text rotator not quite working.

Question

I modified a couple of script ideas that I found here on SO to rotate or flip through several blocks of text (so visitors will not have to scroll) and to pause these when the user hovers. However, I am trying to set it up so that there are three different groups (blocks or divs) of rotating texts in the same view. I've given each group a different ID, but I'm not quite sure of how to add that level of behaviour to the script so that they're all going at the same time. I created a jsfiddle to show the basics of the code...as you will see only the first set (Joan) actually shows the text flipping, the other two (Shelly, Valerie) just sit there blank. Is there a simple fix in the javascript that would make all three of them work simultaneously? multi-group text rotation jsfiddle

    function slideSwitch() {
var $active = $('.fadein quote.active');
if ($active.length == 0) $active = $('.fadein quote:last');
var $next = $active.next().length ? $active.next() : $('.fadein quote:first');

$active.addClass('last-active');

$next.css({
    opacity: 0.0
})
    .addClass('active')
    .animate({
    opacity: 1.0
}, 1000, function () {
    $active.removeClass('active last-active');
});
}

$(function () {
    var interval = setInterval(slideSwitch, 4000);

    $('.fadein').hover(function () {
        clearInterval(interval);
    }, function () {
        interval = setInterval(slideSwitch, 4000);
    });

});

Answer 1

For this to work, you have to think in terms of Object Oriented Programming. See some documentation to learn more.

Look at this code. It gets the scroll to work on each person.

var Person = function(id) {
 this.id = id;
};

Person.prototype.slideSwitch = function(id) {

 let counter = 1;

 function getNext(){

  //identify last active
  var lastActiveCounter = counter;
  $(id+ " quote:nth-child("+lastActiveCounter+")").addClass('last-active');

  //increase counter or reset it to 1
  counter++;
  if (counter > $(id).children('quote').length) {
   counter=1;
  }
  //make changes to next active (since counter has changed)
  $(id+" quote:nth-child("+counter+")").css({
          opacity: 0.0
      })
          .addClass('active')
          .animate({
          opacity: 1.0
      }, 1000, function () {
          $(id+ " quote:nth-child("+lastActiveCounter+")").removeClass('active last-active');
      });
  }

 return getNext;
};

Person.prototype.start = function () {
    this.interval = setInterval(this.slideSwitch(this.id), 4000);
};

Person.prototype.clear = function(id) {
 clearInterval(this.interval);
}

$('.fadein').hover(function(){

 let id=$(this).attr("id");
 switch (id) {
  case "Valerie" :
   Valerie.clear();
   break;
  case "Joan" :
   Joan.clear();
   break;
  case "Shelly":
   Shelly.clear();
   break;
 }
}, function(){
 let id=$(this).attr("id");
 switch (id) {
  case "Valerie" :
   Valerie.start();
   break;
  case "Joan" :
   Joan.start();
   break;
  case "Shelly":
   Shelly.start();
   break;
 }
});


var Valerie = new Person("#Valerie");
var Joan = new Person("#Joan");
var Shelly = new Person("#Shelly");

Valerie.start();
Joan.start();
Shelly.start();

.fadein {
    height: 150px;
    position: relative;
    width: 100%; /*temp*/
    float:left;
}

div quote {
  text-align: left;
    background-color: white;
    left: 0;
    opacity: 0.0;
    position: absolute;
    height: inherit;
    width: 100%;
    top: 0;
    z-index: 8;
    overflow: hidden;
}

caption {
  text-align: left;
    background-color: white;
    left: 0;
    opacity: 0.0;
    position: absolute;
    height: inherit;
    width: 100%;
    top: 0;
    z-index: 8;
    overflow: hidden;
}

div quote.active {
    opacity: 1.0;
    z-index:10;
}
div quote.last-active {
    z-index: 9;
}

<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Joan!</i></h3>
<div class="fadein" id="Joan">
  <quote   style="font-size:16pt;">&quot;Because Joan is nice!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Joan is smart!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Joan attends to the details!&quot;</quote>
</div>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Shelly!</i></h3>
<div class="fadein" id="Shelly">
  <quote   style="font-size:16pt;">&quot;Because Shelly is no-nonsense!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Shelly is does quit!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Shelly is on their side!&quot;</quote>
</div>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Valerie!</i></h3>
<div class="fadein" id="Valerie">
  <quote   style="font-size:16pt;">&quot;Because Valerie listens!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Valerie is tireless!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Valerie gets it done!&quot;</quote>
</div>