Currently working on developing a social media platform similar to Instagram. Encountered an issue while implementing the story feature. Upon opening the story, I created lines using div elements with a common class for CSS styling purposes. However, I introduced an active id that does not apply to all of them.
The ones with the active id are intended to be displayed in white with full opacity (1), while those without the id should have an opacity of 0.5
Initially, applying the active id worked as expected for a single element. But upon assigning the second id, only the first one remained affected.
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 class="flex-container">
<div class="flex-container-item" id="active">A</div>
<div class="flex-container-item">B</div>
<div class="flex-container-item">C</div>
<div class="flex-container-item">D</div>
</div>