title: Javascript onClick picks the wrong element?
body: <pre><code>    for(let x = 0; x &lt; 10; x++){container_For_Dices.push(Math.round(Math.random()*10))}
  let Ids  = [&quot;Dice1&quot;,&quot;Dice2&quot;,&quot;Dice3&quot;,&quot;Dice4&quot;,&quot;Dice5&quot;,&quot;Dice6&quot;,&quot;Dice7&quot;,&quot;Dice8&quot;,&quot;Dice9&quot;,&quot;Dice10&quot;]
  let id = -1
  container_For_Dices= container_For_Dices.map((value=&gt;{
      id +=1
      return(
          &lt;button
           className=&quot;w-20 h-20 m-2 rounded-lg bg-slate-300 content-center pt-4 shadow shadow-gray-500 text-4xl font-bold dices&quot;
           id={Ids[id]}
           onClick={()=&gt;{
              var element = document.getElementById(`${Ids[id]}`)
              element.classList.remove(&quot;dices&quot;)
              element.style.backgroundColor = &quot;rgba(255,255,255,0.5)&quot;
              }} &gt;
              {value}
          &lt;/button&gt;
      )
  }))
  </code></pre>
  <p>The problem is definitely in the onClick part, but I have no clue how to fix it. If I click on one of the elements, the 10th element gets picked. I already checked that every element got the correct id...</p>