Javascript: how do you use multiple if else statments refering to different elements?

I am Completely new to JavaScript so this may be really obvious but I am trying to build an Andon system using traffic lights where if the number is above or below a certain number the light will change colour (i.e. > 5 = green). There are nine sets of lights in total, I have successfully made one light change based on the variable by using query select all and then change the opacity.

When i try and do this with the second light nothing happens. I have tried to make it work by naming my div elements in html and CSS differently e.g. "Zcircle", "A1circle"

Link to code pen.

Any help will be greatly appreciated! Thanks

Code

HTML:

div class="Zcontainer">
       <div class="Zcircle red" color="red">
       </div>
       <div class="Zcircle yellow" color="yellow"></div>
       <div class="Zcircle green" color="green"></div>
     </div>

     <div class="A1container">
       <div class="A1Circle red" color="red">
       </div>
       <div class="A1Circle yellow" color="yellow"></div>
       <div class="A1Circle green" color="green"></div>
     </div>

CSS

.Zcontainer {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  left: 250px;
  bottom: 75px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.Zcircle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  height: 40px;
  width: 40px;
}

.Zcircle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.Zcircle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.Zcircle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.Zcircle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

.A1container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  left: 350px;
  bottom: 275px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

.A1Circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  position: relative;
  height: 40px;
  width: 40px;
}

.A1Circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

.A1Circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.A1Circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.A1Circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

Javascript

//PC15A

var myElements = document.querySelectorAll(".Zcircle");

for (var i = 0; i < myElements.length; i++) {
  myElements[i].style.opacity = 0;
}

var $15a = 2, $15b = 1;

if ($15a > 4) {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 2; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
} else if ($15a < 3) {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 0; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
} else {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 1; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
}

//PC15B
var myElements = document.querySelectorAll(".A1circle");

for (var a = 0; a < myElements.length; a++) {
  myElements[a].style.opacity = 0;
}

var $$15b = 1;

if ($15b > 4) {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 2; x < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
} else if ($15b < 3) {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 0; b < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
} else {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 1; b < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
}