Assigning the same attribute to multiple divs-CodePudding

I'm designing an Instagram clone. I had a problem with the story feature. When the story opened, I made the lines above. These lines are made up of divs. They all have a common class. I made this for CSS design. But I made an active id that won't happen to all of them.

Those with active id will be white and their opacity will be 1. Those who do not have this id will have an opacity of 0.5

It works when you assign a single id. But when I assign the second id, only the first one works.

const active = document.getElementById("active");

active.style.backgroundColor = "white";
active.style.opacity = 1;

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container-item {
  background-color: rgb(255, 255, 255);
  opacity: 0.5;
  padding: 1px;
  flex: 1pt;
  margin-right: 5px;
}

<div >
  <div  id="active">A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</div>

CodePudding user response：

You cant have multiple same ids because id should be unique, instead make active css class e.g.

.active {
   background-color: white;
   opacity: 1;
 }

and then conditionally apply this class to your divs that you want to activate

CodePudding user response：

You can not assign same ID value to multiple HTML elements. Use "active" class on the class attribute and then get it in javascript like that.

const activeElements = document.getElementsByClassName("active");