title: When I click on the view button, instead of opening the card in the index I selected, they all open. Where am I making a mistake?
body: <p>I added View buttons that show more detailed information about the characters into the card bodies that I created with the data I got from the APIs, but when I click the view button, it opens all of them instead of opening the boxes in the index I selected. Where am I doing wrong. I tried for in instead of forEach, but at that time the first card body opens, the others do not open. When I click on the buttons with console.log(event.target) it shows the buttons correctly but they all refer to the cardbody at index 0</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const getAgent = async() =&gt;{
      let url = 'https://valorant-api.com/v1/agents'
      let res = await fetch(url);
      let data = await res.json()
      createAgentBox(data);
     
  }
  
  const createAgentBox = (element) =&gt;{
  
      const agentContainer  = document.querySelector('.agent-container');
      
      let agents = element.data; 
      
      agents.forEach(agent =&gt;{
          
          let agentName = agent.displayName;
          let agentImage = agent.fullPortrait;
          let desc = agent.description;
          let abilitiesImage1 = agent.abilities[0].displayIcon;
          let abilitiesImage2 = agent.abilities[1].displayIcon;
          let abilitiesImage3 = agent.abilities[2].displayIcon;
          let abilitiesImage4 = agent.abilities[3].displayIcon;
          let abilitiesName1 =  agent.abilities[0].displayName;
          let abilitiesName2 =  agent.abilities[1].displayName;
          let abilitiesName3 =  agent.abilities[2].displayName;
          let abilitiesName4 =  agent.abilities[3].displayName;
  
          let x = `&lt;div class="agentbox"&gt;
          &lt;img src=${agentImage} alt=""&gt;
          &lt;h1 class='agentname'&gt;${agentName}&lt;/h1&gt;
      
          &lt;button class="seeDetails" &gt;View
              &lt;div class="showdetails"  &gt;
                  &lt;i class="fa-solid fa-xmark"&gt;&lt;/i&gt;
                          &lt;p&gt;${desc}&lt;/p&gt;
                      &lt;div class='boxs'&gt;
                          &lt;div class="box1"&gt;
                              &lt;img src=${abilitiesImage1} alt=""&gt;
                              &lt;p&gt;${abilitiesName1}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="box2"&gt;
                              &lt;img src=${abilitiesImage2} alt=""&gt;
                              &lt;p&gt;${abilitiesName2}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="box3"&gt;
                              &lt;img src=${abilitiesImage3} alt=""&gt;
                              &lt;p&gt;${abilitiesName3}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="box4"&gt;
                              &lt;img src=${abilitiesImage4} alt=""&gt;
                              &lt;p&gt;${abilitiesName4}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;    
                      &lt;/div&gt;
                  &lt;/div&gt;
              
              &lt;/button&gt;
               
          
      &lt;/div&gt;`
     
          
  
      agentContainer.innerHTML += x;  
  
      });   
  
      let seeDetails = document.querySelectorAll('.seeDetails')
  
      seeDetails.forEach(seeDetail =&gt;{
          seeDetail.addEventListener('click',showInfos)
      })
      function showInfos(e){
          
          /*open view buttons*/
          let showdetails = document.querySelectorAll('.showdetails');
          showdetails.forEach((showdetail,index) =&gt;{
              showdetail.style.display = 'block'
  
          })
      }
     
   }
  
  getAgent()
  
  
  let searcInput = document.querySelector('.searchbox');
  
  
  searcInput.addEventListener('input',function(){
      const agentsName = document.querySelectorAll('.agentname')
      let container  = document.querySelector('.container')
      
      const search = searcInput.value;
      
  
      agentsName.forEach((agentName) =&gt;{
          agentName.parentElement.style.display = 'block';
          container.style.height = '100%'
          if(!agentName.innerHTML.toLowerCase().includes(search)){
              agentName.parentElement.style.display = 'none';
              container.style.height = "100vh"
          }
      })
      
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css2?family=Audiowide&amp;display=swap");
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    width: 100vw;
  }
  
  a {
    text-decoration: none;
    color: black;
    font-family: "Audiowide", cursive;
  }
  
  /*Navbar CSS*/
  
  .navbar {
    width: 100%;
    background: #fe4655;
    border-bottom: 1px solid #fe4655;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
  
  .navlogo {
    margin-left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  
  .navlogo &gt; p {
    font-family: "Audiowide", cursive;
    font-size: 25px;
    color: white;
  }
  
  .navList {
    display: flex;
    justify-content: space-between;
    width: 30rem;
    margin-right: 5rem;
  }
  
  li {
    list-style: none;
  }
  
  ul &gt; li &gt; a {
    text-decoration: none;
    font-family: "Audiowide", cursive;
    color: black;
    font-size: 23px;
    transition-duration: 1s;
    cursor: pointer;
  }
  
  ul &gt; li &gt; a:hover {
    color: white;
    position: relative;
    bottom: 5px;
  }
  
  /*Body*/
  .container {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .search-input {
    display: flex;
    margin: 5rem auto;
  }
  .searchbox {
    outline: none;
    border: 1px;
    padding: 0.5rem;
    width: 20rem;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .searchbox::placeholder {
    font-family: "Audiowide", cursive;
  }
  
  .searcBtn {
    border: 1px solid;
    padding: 0.5rem;
    width: 5rem;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    color: white;
    background-image: linear-gradient(to right, #2a1925, #651830, #ff425c);
  }
  
  .agent-container {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    gap: 3rem;
    justify-content: center;
  }
  
  .agentbox {
    width: 270px;
    height: 350px;
    border: 1px solid white;
    border-radius: 20px;
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .agentbox &gt; img {
    height: 70%;
    width: 100%;
  }
  
  .agentbox &gt; h1 {
    font-family: "Audiowide", cursive;
    color: white;
    text-align: center;
  }
  
  .agentbox &gt; button {
    padding: 0.5rem;
    border-radius: 10px;
    margin: 10px auto;
    border: 1px solid;
    cursor: pointer;
    font-family: "Audiowide", cursive;
    display: flex;
    
  }
  
  .showdetails {
    position: absolute;
    width: 270px;
    height: 250px;
    border: 1px solid white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    top: 0.01rem;
    background: black;
    opacity: 0.7;
    flex-direction: column;
    display: none;
    left: 0.2px;
    
  }
  
  .showdetails &gt; p {
    text-align: center;
    margin-top: 0.9rem;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    color: white;
    
  }
  
  
  
  
  
  .boxs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.9rem;
    
  }
  
  .box1,
  .box2,
  .box3,
  .box4 {
    height: 50px;
    width: 50px;
    
    display: flex;
    flex-direction: column;
  }
  
  .box1 &gt; img,
  .box2 &gt; img,
  .box3 &gt; img,
  .box4 &gt; img {
    height: 100%;
    width: 100%;
  }
  
  .box1 &gt; p,
  .box2 &gt; p,
  .box3 &gt; p,
  .box4 &gt; p {
    color: white;
    font-size: 13px;
    text-align: center;
  }
  
  .fa-xmark {
    color: white;
    position: relative;
    left: 7rem;
    top: 0.5rem;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar"&gt;
          &lt;div class="navlogo"&gt;
              &lt;a href=""&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valorant_logo.svg/2560px-Valorant_logo.svg.png" alt="#" height="30px" width="150px"&gt;&lt;/a&gt;
              &lt;p&gt;-wiki&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="navMenu"&gt;
              &lt;ul class="navList"&gt;
                  &lt;li class="navItem"&gt;
                      &lt;a href="/Valorant_wiki/home page/index.html"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;About Us&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      
      &lt;div class="container"&gt;
          &lt;div class="search-input"&gt;
              &lt;input type="text" class="searchbox" placeholder="Search Agents..."&gt;
              &lt;button class="searcBtn"&gt;&lt;i class="fa-solid fa-magnifying-glass"&gt;&lt;/i&gt;&lt;/button&gt;
           &lt;/div&gt;
           &lt;div class="agent-container"&gt;
             
              &lt;/div&gt;
           &lt;/div&gt;
           
          
      &lt;/div&gt;
      
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>