Как добавить ещё отзывов?

Question

mastaJoe @mastaJoe

Как добавить ещё отзывов?

Есть вот такой пример отзывов, очень понравился, но когда пытаюсь добавить ещё отзывов, то все ломается, как правильно их добавить что бы работала?

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="reference"><a href="https://stripe.com/us/payments" target="_blank">REFERENCE</a></div>

<div class="container" onload="changePos()">
  <div class="banner">RECENT UPDATES</div>
  <ul class="ultra">
   
    <li class="tab-0">
      
      <strong>PAYMENTS</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
    </li>
    <li class="tab-1">
      
      <strong>DASHBOARD</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
         
    </li>
    <li class="tab-2"> 
      
      <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Rules can now compare numerical metadata. For example, reviews could trigger if <strong><code>::customer_age:: < 21 </code></strong> (if you pass in custom metadata for a customer's age). </p>
      
    </li>
<li class="tab-3">
  <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Upgrade to version 2.0 of our iOS Dashboard app, which includes a new design, an updated home screen, and iPhone X support.</p>
</li>
<li class="tab-4">
  <strong>RADAR</strong> <span class="date">JULY 9 </span></br>
<p>
Radar will now automatically allow any payment that is protected from being disputed for fraud due to a liability shift. For example, if the payment is verified by 3D Secure.</p>
</li>

    </ul>
</div>

setInterval(changePos,5000)

function changePos(){
  var x = document.getElementsByClassName("ultra")[0].childNodes;
  x = Array.from(x)
   
  // console.log(x);
  for(var i=1; i<x.length;i+=2){  
    if(x[i].classList.contains("tab-0")){
      x[i].classList.remove("tab-0");
      x[i].classList.add("tab-4");
    }
    else if(x[i].classList.contains("tab-1")){
      x[i].classList.remove("tab-1");
      x[i].classList.add("tab-0");
 
    }
    else if(x[i].classList.contains("tab-2")){
      x[i].classList.remove("tab-2");
      x[i].classList.add("tab-1");
      
    }
    else if(x[i].classList.contains("tab-3")){
      x[i].classList.remove("tab-3");
      x[i].classList.add("tab-2");
      
    }
    else if(x[i].classList.contains("tab-4")){
      x[i].classList.remove("tab-4");
      x[i].classList.add("tab-3");
    }
    else if(x[i].classList.contains("tab-5")){
      x[i].classList.remove("tab-5");
      x[i].classList.add("tab-4");
    }
    else if(x[i].classList.contains("tab-6")){
      x[i].classList.remove("tab-6");
      x[i].classList.add("tab-5");
    }
  }
  
  let y = x.filter((a)=> {
    return a.className !== undefined;
  })
  
  console.log(y)
  let z = findValue(y,"tab-1");
  
  function findValue(arr, str){
    for(let i=0; i <arr.length ;i++){
      if(arr[i].className === str){
        return arr[i].offsetHeight;
      }
    }
  }
  
  y.forEach((a)=>{
    if(a.className==="tab-1"){
      a.style.transform = `scale(1.0)`
    } else if (a.className === "tab-2"){
      a.style.transform = `translateY(${z-a.offsetHeight+30}px) scale(0.9)`
    } else if (a.className === "tab-3"){
      a.style.transform = `translateY(${z-a.offsetHeight+60}px) scale(0.8)`
    } else if (a.className === "tab-4"){
      a.style.transform = `translateY(${z-a.offsetHeight+70}px) scale(0.7)`
    } else if (a.className === "tab-5"){
      a.style.transform = `translateY(${z-a.offsetHeight+90}px) scale(0.6)`
    } else if (a.className === "tab-6"){
      a.style.transform = `translateY(${z-a.offsetHeight+100}px) scale(0.5)`
    } else if (a.className === "tab-0"){
      a.style.transform = `translateY(${z-a.offsetHeight-90}px) scale(1.08)`
    }
  })
  
}