what I am trying to do just show some text on click with JavaScript by giving it an active class.as you can see there are two buttons with same class of parent as-well as the children only the contents are different. but only the first button is working because I am passing the array value of [0].is there a way to do all the buttons? thank you..

let arrowbtn = document.getElementsByClassName("story-contents-title")[0];
let info = document.getElementsByClassName("story-contents-discription")[0];
arrowbtn.addEventListener("click", () => {
  info.classList.toggle("active");
  arrowbtn.classList.toggle("active");

});

.story-title {
  color: #377dff;
}

.story-contents {
  margin-top: 1rem;
}

.story-contents-title {
  background-color: white;
  color: white;
  border: solid 2px #377dff;
  padding: 0.5rem;
  font-size: 4rem;
  border-radius: 10px;
  width: 20rem;
  color: #377dff;
}

.story-contents-title svg {
  stroke: #377dff;
  transition: all 0.5s ease-out;
}

.story-contents-title.active svg {
  transform: rotate(90deg);
}

.story-contents-discription {
  margin-top: 0.5rem;
  padding: 1rem;
  color: white;
  background-color: #377dff;
  border-radius: 10px;
  display: none;
}

.story-contents-discription.active {
  display: block;
}

<div >
  <h1 >Our Story</h1>
  <div >
    <button >2021<svg xmlns="http://www.w3.org/2000/svg"  width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
              </svg></button>
    <p >Wins ‘Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award’ by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins ‘Digital Lending Award’ at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending”
      at India Digital Awards</p>
  </div>
  <div >
    <button >2020<svg xmlns="http://www.w3.org/2000/svg"  width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
              </svg></button>
    <p >
      Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages

    </p>
  </div>
</div>

CodePudding user response：

I would delegate and navigate within the container

document.querySelector(".story").addEventListener("click", function(e) {
  const tgt = e.target.closest("button"); 
  tgt.closest(".story-contents").querySelector(".story-contents-discription").classList.toggle("active");
  tgt.classList.toggle("active");
});

.story-title {
  color: #377dff;
}

.story-contents {
  margin-top: 1rem;
}

.story-contents-title {
  background-color: white;
  color: white;
  border: solid 2px #377dff;
  padding: 0.5rem;
  font-size: 4rem;
  border-radius: 10px;
  width: 20rem;
  color: #377dff;
}

.story-contents-title svg {
  stroke: #377dff;
  transition: all 0.5s ease-out;
}

.story-contents-title.active svg {
  transform: rotate(90deg);
}

.story-contents-discription {
  margin-top: 0.5rem;
  padding: 1rem;
  color: white;
  background-color: #377dff;
  border-radius: 10px;
  display: none;
}

.story-contents-discription.active {
  display: block;
}

<div >
  <h1 >Our Story</h1>
  <div >
    <button >2021<svg xmlns="http://www.w3.org/2000/svg"  width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
              </svg></button>
    <p >Wins ‘Outstanding Crisis Finance Innovation 2021 (Asia Pacific) Award’ by Global Finance Magazine <br> Launches Step Up Credit Card <br> Wins ‘Digital Lending Award’ at the Fintech India Innovation Awards <br> Wins “Excellence in Consumer Lending”
      at India Digital Awards</p>
  </div>
  <div >
    <button >2020<svg xmlns="http://www.w3.org/2000/svg"  width="34" height="34" viewBox="0 0 24 24" stroke-width="1.5" stroke="" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z" />
              </svg></button>
    <p >
      Upgrades in-house systems to enable work-from-home for employees <br> Launches Free Credit Report in Regional Languages

    </p>
  </div>
</div>