Swipe/Rotating word Animated Text, possible to do 2x?

Site URL: https://tjr-new-site.squarespace.com/

Hi there! I've perused a few forums and eventually found a nice, functional solution for having 1 word in a text block rotate through multiple words. (ex: Taylor is a "print"/"web"/"brand" designer...) Visual example, though not the code I'm using.

I would like to know how I can tweak the JavaScript or HTML so that the affect applies to 2 instances in the same sentence. (ex: Taylor is a "print"/"web"/"brand" designer who has experience with "client1"/"client2"/"client3".) I'm not familiar at all with writing JS. Here's what I have in the text code block: 

<section class="sp-intro">
  <h3 class="sp-headline slide">
    <span>Taylor is a(n) <span class="sp-words-wrapper">
      <b class="is-visible">organized</b>
      <b>brand</b>
      <b>print</b>
      <b>web</b>
    </span>
      designer who has experience with </span>
    <span class="sp-words-wrapper">
      <b class="is-visible">branding</b>
      <b>consumer goods</b>
      <b>packaging</b>
      <b>websites</b>
      <b>books</b>
    </span>.
  </h3>
</section>

Of course, the first animation works fine, the second span class does not rotate through. I tried changing the 2nd instance to "sp-words-wrapper-b", and adding that throughout the Js, but also did not work.

Here's my site, pw: troysitehelp

Can you paste all code here? It seems missing JS & CSS code

hey there @tuanphan! No CSS, here's the JS injected to header:

<style>
.sp-intro {
text-align: left;
}
.sp-headline {
  margin: 0 !important;
}
.sp-intro b {
  font-weight: inherit !important;
  }
.sp-intro {
line-height: ;
font-size: ;
font-weight: 400 !important;
font-style: initial;
color: ;
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
width: auto !important;
}
.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.sp-words-wrapper b.is-visible {
position: relative;
}
.no-js .sp-words-wrapper b {
opacity: 0;
}
.no-js .sp-words-wrapper b.is-visible {
opacity: 1;
}

.sp-headline.slide span {
display: inline-block;
padding: 0;
}
.sp-headline.slide .sp-words-wrapper {
overflow: hidden;
vertical-align: bottom;
width: auto;
}
.sp-headline.slide b {
opacity: 0;
top: .2em;
}
.sp-headline.slide b.is-visible {
top: 0;
opacity: 1;
-webkit-animation: fade 0.6s;
-moz-animation: fade 0.6s;
animation: fade 0.6s;
}
.sp-headline.slide b.is-hidden {
-webkit-animation: fade-out 0.6s;
-moz-animation: fade-out 0.6s;
animation: fade-out 0.6s;
}

@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-moz-transform: translateY(-100%);
}
60% {
opacity: 1;
-moz-transform: translateY(20%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
}
}
@-moz-keyframes slide-out {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
60% {
opacity: 0;
-moz-transform: translateY(120%);
}
100% {
opacity: 0;
-moz-transform: translateY(100%);
}
}
@keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
-moz-transform: translateY(120%);
-ms-transform: translateY(120%);
-o-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}

@media (min-width : 668px) and (max-width : 1024px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}

@media (max-width : 667px) {
.sp-intro {
line-height:  !important;
font-size:  !important;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function($){

  var animationDelay = 2500,
  barAnimationDelay = 3800,
  barWaiting = barAnimationDelay - 3000,
  lettersDelay = 50,
  typeLettersDelay = 150,
  selectionDuration = 500,
  typeAnimationDelay = selectionDuration + 800,
  revealDuration = 600,
  revealAnimationDelay = 1500;
  
  initHeadline();
  
  function initHeadline() {
    singleLetters($('.sp-headline.letters').find('b'));
    animateHeadline($('.sp-headline'));
  }
  
  function singleLetters($words) {
    $words.each(function(){
      var word = $(this),
      letters = word.text().split(''),
      selected = word.hasClass('is-visible');
      for (i in letters) {
        if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
        letters[i] = (selected) ? '<i class=“in”>' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
      }
      var newLetters = letters.join('');
      word.html(newLetters).css('opacity', 1);
    });
  }
  
  function animateHeadline($headlines) {
    var duration = animationDelay;
    $headlines.each(function(){
      var headline = $(this);
      
      if(headline.hasClass('loading-bar')) {
        duration = barAnimationDelay;
        setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
      } else if (headline.hasClass('clip')){
        var spanWrapper = headline.find('.sp-words-wrapper'),
        newWidth = spanWrapper.width() + 10
        spanWrapper.css('width', newWidth);
      } else if (!headline.hasClass('type') ) {
        var words = headline.find('.sp-words-wrapper b'),
        width = 0;
        words.each(function(){
        var wordWidth = $(this).width();
      if (wordWidth > width) width = wordWidth;
    });
      headline.find('.sp-words-wrapper').css('width', width);
      };
      
      setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
    });
  }
  
  function hideWord($word) {
    var nextWord = takeNext($word);
    
    if($word.parents('.sp-headline').hasClass('type')) {
    var parentSpan = $word.parent('.sp-words-wrapper');
    parentSpan.addClass('selected').removeClass('waiting');
    setTimeout(function(){
    parentSpan.removeClass('selected');
    $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
    }, selectionDuration);
    setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
    
    } else if($word.parents('.sp-headline').hasClass('letters')) {
    var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
    hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
    showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
    
    }else if($word.parents('.sp-headline').hasClass('clip')) {
    $word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
    switchWord($word, nextWord);
    showWord(nextWord);
    });
    
    } else if ($word.parents('.sp-headline').hasClass('loading-bar')){
    $word.parents('.sp-words-wrapper').removeClass('is-loading');
    switchWord($word, nextWord);
    setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
    setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting);
    
    } else {
    switchWord($word, nextWord);
    setTimeout(function(){ hideWord(nextWord) }, animationDelay);
    }
  }
  
  function hideLetter($letter, $word, $bool, $duration) {
    $letter.removeClass('in').addClass('out');
    
    if(!$letter.is(':last-child')) {
     setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);
    } else if($bool) {
     setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
    }
    
    if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
    var nextWord = takeNext($word);
    switchWord($word, nextWord);
    }
  }
  
  function showLetter($letter, $word, $bool, $duration) {
    $letter.addClass('in').removeClass('out');
    
    if(!$letter.is(':last-child')) {
      setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration);
    } else {
      if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);}
      if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
    }
  }
  
  function takeNext($word) {
    return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
  }
  
  function takePrev($word) {
    return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
  }
  
  function switchWord($oldWord, $newWord) {
    $oldWord.removeClass('is-visible').addClass('is-hidden');
    $newWord.removeClass('is-hidden').addClass('is-visible');
  }
  
  document.addEventListener('pageChange', function(){
    animationDelay = 2500;
    barAnimationDelay = 3800;
    barWaiting = barAnimationDelay - 3000;
    lettersDelay = 50;
    typeLettersDelay = 150;
    selectionDuration = 500;
    typeAnimationDelay = selectionDuration + 800;
    revealDuration = 600;
    revealAnimationDelay = 1500;
    initHeadline();
  });
  
  window.onload = watch;
  function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
});
</script>