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

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

HTML
1コード
2```<div class="man">
3<p><span class="jump-text">おとこ</span>のこ</p>
4  </div>
5
6<div class="woman">
7<p><span class="junp-text2">おんな</span> のこ</p>
8</div>
9
10
11```CSS
12コード
13```.man{
14　font-family: まろみん;
15  color:#99CCFF;
16position: absolute;
17top:300px;
18left:100px;
19text-shadow: 0 5px 5px #336699;
20
21padding: 10px;
22  font-size: 100px;
23}
24
25.jump-text span {
26  animation: pyon 0.3s linear;
27  position: relative;
28}
29
30@keyframes pyon {
31  0% {top: 0}
32  50% {top:-17px}
33  100%{top: 0}
34
35}
36
37
38.woman{
39　font-family: まろみん;
40  color:#FF99FF;
41position: absolute;
42top:300px;
43left:1000px;
44text-shadow: 0 5px 5px #CC33FF;
45
46padding: 10px;
47  font-size: 100px;
48}
49
50.jump-text span {
51  animation: pyon 0.3s linear;
52  position: relative;
53}
54
55@keyframes pyon {
56  0% {top: 0}
57  50% {top:-17px}
58  100%{top: 0}
59
60}
61
62
63```javascript
64コード
65```  randomCharactor('jump-text');
66
67  function randomCharactor(c) {
68
69  var randomChar = document.getElementsByClassName(c);
70
71  for (var i = 0; i < randomChar.length; i++) {
72
73        //クロージャー
74        (function(i) {
75
76            //i 番目の要素、テキスト内容、文字列の長さを取得
77            var randomCharI = randomChar[i];
78            var randomCharIText = randomCharI.textContent;
79            var randomCharLength = randomCharIText.length;
80
81            //何番目の文字を跳ねさせるかをランダムで決める
82            var Num = ~~(Math.random() * randomCharLength);
83
84            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
85            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
86            randomCharI.innerHTML = newRandomChar;
87
88            //アニメーションが終わったら再び関数を発火させる
89            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
90                randomCharactor(c)
91            }, false)
92        })(i)
93    }
94  }
95
96  randomCharactor('jump-text2');
97
98  function randomCharactor(c) {
99
100  var randomChar = document.getElementsByClassName(c);
101
102  for (var i = 0; i < randomChar.length; i++) {
103
104        //クロージャー
105        (function(i) {
106
107            //i 番目の要素、テキスト内容、文字列の長さを取得
108            var randomCharI = randomChar[i];
109            var randomCharIText = randomCharI.textContent;
110            var randomCharLength = randomCharIText.length;
111
112            //何番目の文字を跳ねさせるかをランダムで決める
113            var Num = ~~(Math.random() * randomCharLength);
114
115            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
116            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
117            randomCharI.innerHTML = newRandomChar;
118
119            //アニメーションが終わったら再び関数を発火させる
120            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
121                randomCharactor(c)
122            }, false)
123        })(i)
124    }
125  }