Code PenよりコピペしてきたJSが動きません

ザ・ベストテンのパタパタとしたパネルの動きをwebサイトで使用したく、
Code Penから、cssとJSをコピーしてきましたが、うまく動きません。
（参照元URL：https://codepen.io/jesusbotella/pen/opmRrO）

読み込み用のURLはコピペしたあとに追記しました。
表示はうまくいっているのですが、全く動かないので、
おそらくJSがうまく読み込めていないのかと思うのですが、
何が足りていないかわからない状態です。

当方初心者のため、質問もうまくできているか不安ですが、ご回答いただけましたら幸いです。
よろしくお願いします。

html
1<div class="splitflap-display">
2<div class="split-flap" data-letter="●●●"></div></div>

css
1.splitflap-display {
2    display: flex;
3    margin: 10px;
4    flex-wrap: wrap;
5    align-items: center;
6    height: 100%;
7    justify-content: center;
8    align-content: center;
9}
10
11.split-flap {
12  width: 100%;
13  height: 4vw;
14  border: 2px solid rgba(0, 0, 0, 0.2);
15  position: relative;
16  margin: 0 20px 20px 0;
17  font-size: 2vw;
18  line-height: 70px;
19  text-align: center;
20  box-sizing: border-box;
21  box-shadow: inset 2px 2px 0px 0px rgba(0, 0, 0, 0.5);
22  overflow: hidden;
23  position: relative;
24}
25
26.split-flap:after {
27    content: ' ';
28    width: 100%;
29    height: 2px;
30    background-color: rgba(0, 0, 0, 0.5);
31    position: absolute;
32    top: 50%;
33    left: 0%;
34    transform: translate3d(0, -50%, 0);
35}
36
37.split-flap:before {
38  content: attr(data-letter);
39  width: 100%;
40  height: 100%;
41  top: 50%;
42  left: 50%;
43  transform: translate3d(-50%, -50%, 0);
44  position: absolute;
45/*  transition: height 100ms linear;*/
46  animation-duration: 120ms;
47  animation-delay: attr(data-animation-delay);
48  animation-name: slidein;
49  animation-iteration-count: 6;
50  overflow: hidden;
51}
52
53/*.split-flap.is-changing:before {
54  height: 0;
55}*/

JS
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
2<script>
3function makeid() {
4  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
5
6  return possible.charAt(Math.floor(Math.random() * possible.length));
7}
8
9function randomTime(){
10  return Math.round(Math.random() * 200 );
11}
12function changeAnimationTime(element){
13  var random = randomTime();
14  element.setAttribute('animation-delay', random + "ms");
15  
16  console.log('animation-delay', random + "ms")
17}
18
19
20var mapFn = function(element) {
21    changeAnimationTime(element);
22  var i = 0;
23  var originalAttribute = element.getAttribute('data-letter');
24  var test = [makeid(), makeid(), makeid(), makeid(), makeid(), originalAttribute];
25  element.addEventListener("animationend", function() {
26    element.setAttribute('data-letter', originalAttribute);
27  }, false);
28  element.addEventListener("animationiteration", function() {
29    element.setAttribute('data-letter', test[i++]);
30  }, false);
31};
32
33var changingElements = Array.from(document.querySelectorAll('[data-letter]'), mapFn);
34</script>