title: onClick activating every other onClick events
body: <p>I'm having an issue where I have multiple progress bar with onClick event created but when I click on the progress bar, every other progress bar's onClick event is activated.</p>
  
  <p>I have a for loop that pushes multiple <code>&lt;td&gt;</code> with a progress bar in it to be rendered.</p>
  
  <p>What I want to achieve is when the user clicks on each Progress Bar, different details appear on the Modal depending on which Progress Bar they click on.</p>
  
  <p>I am using <a href="https://react-bootstrap.github.io/react-overlays/#modals" rel="nofollow noreferrer">react-overlays</a> modal.</p>
  
  <p><a href="https://i.stack.imgur.com/nyXvE.jpg" rel="nofollow noreferrer">Picture of all the div showing up hidden after clicking on the Progress Bar</a></p>
  
  <p>Thank You for helping!</p>
  
  <p>Code:</p>
  
  <pre><code>getInitialState: function(){
     return { showModal: false };
  },
  
  close(){
    this.setState({ showModal: false });
  },
  
  open(){
    this.setState({ showModal: true });
  },
  
  
  for loop(
    bodyRows[cellIndex].push(
        &lt;td id="tableBody"&gt;
          &lt;div className="progress" role="progressbar" id="progressBarStyle" onClick={this.open}&gt;
            &lt;Modal
              aria-labelledby='modal-label'
              style={modalStyle}
              backdropStyle={backdropStyle}
              show={this.state.showModal}
              onHide={this.close}
              keyboard={true}
            &gt;
              &lt;div style={dialogStyle()} &gt;
                  Hello
              &lt;/div&gt;
            &lt;/Modal&gt;
            &lt;div className="progress-meter"  data-values={this.calculatePercent(value)}&gt;
              {Math.floor(this.calculatePercent(value)) + '%'}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
    )
  )
  </code></pre>