Scrolling Text (ticker) How can I set this up efficiently so it can be used multiple times?

I am using GreenSock/TweenMax to create scrolling text similar to what can be found on this page: https://new-flavors.risekombucha.com/

Greensock Docs: https://greensock.com/get-started-js

I've been able to reverse engineer some of what they created, but I'm getting stuck on how they're using this multiple times (and how theirs is working so cleanly, while mine does not (hesitates, copies wrong, doesn't run forever).

Anyway, my biggest concern is how to get this to work multiple times on the same page with different text, without having to rewrite the entire code block for every instance (if possible).

Here's what I have:

jQuery(function($){ /* GREENSOCK */
		/* TICKER <----------- Right */
		
			var $tickerWrapper = $(".tickerwrapper");
			var $list = $tickerWrapper.find("ul.list");
			var $clonedList = $list.clone();
			var listWidth = 10;

			$list.find("li").each(function (i) {
						listWidth += $(this, i).outerWidth(true);
			});

			var endPos = $tickerWrapper.width() - listWidth;

			$list.add($clonedList).css({
				"width" : listWidth + "px"
			});

			$clonedList.addClass("cloned").appendTo($tickerWrapper);

			//TimelineMax
			var infinite = new TimelineMax({repeat: -1, paused: true});
			var time = 100;

			infinite
			  .fromTo($list, time, {rotation:0.01,x:0}, {force3D:true, x: -listWidth, ease: Linear.easeNone}, 0)
			  .fromTo($clonedList, time, {rotation:0.01, x:listWidth}, {force3D:true, x:0, ease: Linear.easeNone}, 0)
			  .set($list, {force3D:true, rotation:0.01, x: listWidth})
			  .to($clonedList, time, {force3D:true, rotation:0.01, x: -listWidth, ease: Linear.easeNone}, time)
			  .to($list, time, {force3D:true, rotation:0.01, x: 0, ease: Linear.easeNone}, time)
			  .progress(1).progress(0)
			  .play();

			//Pause/Play        
			$tickerWrapper.on("mouseenter", function(){
				infinite.pause();
			}).on("mouseleave", function(){
				infinite.play();
			});
});		
		// End Ticker

/* MARQUEE */
.tickerwrapper {
  /* the outer div */
  position: relative;
  top: 30px;
  left:0%;
  width: 100%;
  height: 42px; /* must match text */
/*  overflow: hidden;*/
  cursor: pointer;
}
.tickerwrapper ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}
.tickerwrapper ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}
.tickerwrapper ul.list li {
  float: left;
  padding-left: 20px;
 font-size: 42px!important;
	color: #e51313;
}
.tickerwrapper ul.list li span {
	font-size: 42px!important;
	text-transform: uppercase;
	color: #e51313;
}
.tickerwrapper li {
	-webkit-text-fill-color: #0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: currentColor;
}
.tickerwrapper span.solid {
	-webkit-text-fill-color: #e51313;
    -webkit-text-stroke-width: 0;
	font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<!-- FIRST LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
  </ul>
</div>


<!-- SECOND LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
  </ul>
</div>

Solution

Try this (check the $(".tickerwrapper").each(function(ix, ex){ instruction):

jQuery(function($){ /* GREENSOCK */
		/* TICKER <----------- Right */
    $(".tickerwrapper").each(function(ix, ex){
            var $tickerWrapper = $(ex);
			var $list = $tickerWrapper.find("ul.list");
			var $clonedList = $list.clone();
			var listWidth = 10;

			$list.find("li").each(function (i) {
						listWidth += $(this, i).outerWidth(true);
			});

			var endPos = $tickerWrapper.width() - listWidth;

			$list.add($clonedList).css({
				"width" : listWidth + "px"
			});

			$clonedList.addClass("cloned").appendTo($tickerWrapper);

			//TimelineMax
			var infinite = new TimelineMax({repeat: -1, paused: true});
			var time = 100;

			infinite
			  .fromTo($list, time, {rotation:0.01,x:0}, {force3D:true, x: -listWidth, ease: Linear.easeNone}, 0)
			  .fromTo($clonedList, time, {rotation:0.01, x:listWidth}, {force3D:true, x:0, ease: Linear.easeNone}, 0)
			  .set($list, {force3D:true, rotation:0.01, x: listWidth})
			  .to($clonedList, time, {force3D:true, rotation:0.01, x: -listWidth, ease: Linear.easeNone}, time)
			  .to($list, time, {force3D:true, rotation:0.01, x: 0, ease: Linear.easeNone}, time)
			  .progress(1).progress(0)
			  .play();

			//Pause/Play        
			$tickerWrapper.on("mouseenter", function(){
				infinite.pause();
			}).on("mouseleave", function(){
				infinite.play();
			});
    });    			
});		
		// End Ticker

/* MARQUEE */
.tickerwrapper {
  /* the outer div */
  position: relative;
  top: 30px;
  left:0%;
  width: 100%;
  height: 42px; /* must match text */
/*  overflow: hidden;*/
  cursor: pointer;
}
.tickerwrapper ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}
.tickerwrapper ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}
.tickerwrapper ul.list li {
  float: left;
  padding-left: 20px;
 font-size: 42px!important;
	color: #e51313;
}
.tickerwrapper ul.list li span {
	font-size: 42px!important;
	text-transform: uppercase;
	color: #e51313;
}
.tickerwrapper li {
	-webkit-text-fill-color: #0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: currentColor;
}
.tickerwrapper span.solid {
	-webkit-text-fill-color: #e51313;
    -webkit-text-stroke-width: 0;
	font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<!-- FIRST LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SEED BASED ALWAYS SEED BASED </span>
      </li>
  </ul>
</div>


<!-- SECOND LINE -->
<div class="tickerwrapper">
   <ul class='list'>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
      <li class='listitem'>
        <span>ALWAYS SOMETHING ELSE</span>
      </li>
  </ul>
</div>