I want to get random height of the elements

Question

I want to give random heights to the low bar and the up bar randomly but if I do it using a for loop I am getting an error

function setObstacle() {
  let cont = document.querySelector("#container");
  let obst = `<div class="obstacle">
    <div class="upper-bar"></div>
    <div class="lower-bar"></div>
</div>`

  for (let i = 0; i < 10; i++) {
    cont.innerHTML += obst;

    const randomNumber = () => {
      let num = Math.floor(Math.random() * 40 - 10) + 10;
      return num;
    };

    const lowHeight = () => {
      let upBar = document.getElementsByClassName('upper-bar');
      let lowBar = document.getElementsByClassName('lower-bar');

      upBar.style.height = `${randomNumber()}%`;
      lowBar.style.height = `${(80 - randomNumber())}%`;
    }
    lowHeight()
    console.log(randomNumber());
  }
}

setObstacle();