setting the width of a bar wit h an object propriety

I am trying to set the width of a bar to be whatever I get from a fetch, but I get the following message: "Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'width')"

I don't really understand why I get this message as I have defined the width with css to be 100%:

.peg-1-bar-fill, .peg-2-bar-fill, .peg-3-bar-fill, .peg-4-bar-fill, .peg-5-bar-fill, .peg-6-bar-fill, .peg-7-bar-fill, .peg-8-bar-fill, .peg-9-bar-fill, .peg-10-bar-fill,
.peg-11-bar-fill, .peg-12-bar-fill {
  border-radius: 50px;
  height: 100%;
  width: 100%;

and here is the html:

<div class="peg-wrapper">
        <div class="peg-name-7">
          <h4>7</h4>
        </div>
        <p class="label-3">Starts:</p>
        <span class="time-start-peg-7"></span>
        <p class="label-1">Ends:</p>
        <span id="time-end-peg-7"></span>
        <div class="peg-7-start-time total-time">
          <p class="label-2">Length:</p>
          <span id="total-time-7"></span>
          <span id="peg-7-update-time">+10</span>

        </div>
        <div class="peg-7-bar">
          <div class="peg-7-bar-fill">
          </div>
        </div>
        <div class="peg-7-timer">
          <span id="time-peg-7"></span>
        </div>
      </div>

and the JS:

const pegsData_url = "https://fakestoreapi.com/products";
const uiProgressBarPeg7 = document.getElementsByClassName(`peg-1-bar-fill`);
const pegs1 = document.getElementById("total-time-1");
const max = 100;
fetch(pegsData_url)
  .then((data) => {
    return data.json();
    console.log(data);
    console.log(data);
  })
  .then((completedata) => {
    console.log(completedata);

const   peg7 = {
      status: completedata[1].id,
      startTime: completedata[7].price,
      endTime: completedata[7].price,
      totalLength: completedata[7].price+'m',
      remainingTime: completedata[7].price+'m',
      barPercentage:completedata[9].price,
    };
    console.log(peg7.barPercentage);
    const percent = (peg7.barPercentage) / max * 100;// it shoul be 109
    console.log(percent);
    uiProgressBarPeg7.style.width = `${percent}%`;


    if( peg7.status === 0){
      uiProgressBarPeg7.style.background = "var(--color-light-gray)";
      }
      else if ( peg7.status === 1) {
        uiProgressBarPeg7.style.background = "var(--dark-green-color)";
      } else if ( peg7.status === 2) {
    //     uiProgressBarPeg7.style.background = "var(--light-orange-color)";
      }
      else if(peg7.status === 3){
        uiProgressBarPeg7.style.background = "var(--light-red-color)";
        uiTime.style.fontFamily = 'Poppins, sans-serif';
        uiTime.style.fontSize = '16px';
      }
      else if (peg7.status === 4){
        uiProgressBarPeg7.style.background = "var(--color-light-gray)";
      }
      if( peg7.status== 0 & peg7.barPercentage ===0 ){
        uiProgressBarPeg7.style.background = "var(--color-light-gray)";

      }//continue from here


    document.getElementsByClassName("time-start-peg-7").innerHTML = peg2.startTime;
    document.getElementById("time-end-peg-7").innerHTML = peg2.startTime;
    document.getElementById("total-time-7").innerHTML = peg2.totalLength;
    document.getElementById("time-peg-7").innerHTML = peg2.totalLength;

}

after setting the width, it should also change the color of the bar, It works on the following example:

let max = 100;
    let barPercentagePeg1 = 5;
    let status=2 ;

const percent = (barPercentagePeg1 / max) * 100;
      uiProgressBar.style.width = `${percent}%`;//here

      if (status === 1) {
        uiProgressBar.style.background = "var(--dark-green-color)";
      } else if (status === 2) {
        uiProgressBar.style.background = "var(--light-orange-color)";
      } else if (status === 3) {
        uiProgressBar.style.background = "var(--light-red-color)";
      }else if(status === 0) {
        uiProgressBar.style.background = "var(--color-light-gray)";
      }

any suggestions/ help, please?