違うclassに同じコードを書いても最初の要素しか動きません。

プログラミング初心者です。文字がぴょんぴょんはねるというサンプルコードがあったのでそれを下の様にコピペしました。
”man"というclassで”おとこのこ”と、文字をはねさせることはできたのですが、その下に”woman”というclassで”おんなのこ”と、文字をはねさせようとしたのに”woman”には反映されませんでした。
class名が違っても同じコードでは反映されないのでしょうか？
試しに、"jump-text"が同じ名前だから動かないのかと思い、”woman”の方の全てのjump-textに2を付けてみたのですがそれでも”おとこのこ”だけしかはねませんでした。こういう場合はどう書くのがいいのでしょうか？
コード長くてすみません。

HTML
コード
```<div class="man">
<p><span class="jump-text">おとこ</span>のこ</p>
  </div>

<div class="woman">
<p><span class="junp-text2">おんな</span> のこ</p>
</div>


```CSS
コード
```.man{
　font-family: まろみん;
  color:#99CCFF;
position: absolute;
top:300px;
left:100px;
text-shadow: 0 5px 5px #336699;

padding: 10px;
  font-size: 100px;
}

.jump-text span {
  animation: pyon 0.3s linear;
  position: relative;
}

@keyframes pyon {
  0% {top: 0}
  50% {top:-17px}
  100%{top: 0}

}


.woman{
　font-family: まろみん;
  color:#FF99FF;
position: absolute;
top:300px;
left:1000px;
text-shadow: 0 5px 5px #CC33FF;

padding: 10px;
  font-size: 100px;
}

.jump-text span {
  animation: pyon 0.3s linear;
  position: relative;
}

@keyframes pyon {
  0% {top: 0}
  50% {top:-17px}
  100%{top: 0}

}


```javascript
コード
```  randomCharactor('jump-text');

  function randomCharactor(c) {

  var randomChar = document.getElementsByClassName(c);

  for (var i = 0; i < randomChar.length; i++) {

        //クロージャー
        (function(i) {

            //i 番目の要素、テキスト内容、文字列の長さを取得
            var randomCharI = randomChar[i];
            var randomCharIText = randomCharI.textContent;
            var randomCharLength = randomCharIText.length;

            //何番目の文字を跳ねさせるかをランダムで決める
            var Num = ~~(Math.random() * randomCharLength);

            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
            randomCharI.innerHTML = newRandomChar;

            //アニメーションが終わったら再び関数を発火させる
            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
                randomCharactor(c)
            }, false)
        })(i)
    }
  }

  randomCharactor('jump-text2');

  function randomCharactor(c) {

  var randomChar = document.getElementsByClassName(c);

  for (var i = 0; i < randomChar.length; i++) {

        //クロージャー
        (function(i) {

            //i 番目の要素、テキスト内容、文字列の長さを取得
            var randomCharI = randomChar[i];
            var randomCharIText = randomCharI.textContent;
            var randomCharLength = randomCharIText.length;

            //何番目の文字を跳ねさせるかをランダムで決める
            var Num = ~~(Math.random() * randomCharLength);

            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
            randomCharI.innerHTML = newRandomChar;

            //アニメーションが終わったら再び関数を発火させる
            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
                randomCharactor(c)
            }, false)
        })(i)
    }
  }