title: eventlistner in table each row only trigger last row
body: <p>I'm writing a table allow user click table row and show the hidden rows.
  I use addEventListener with loop to allow each table row call the hidden rows under the row.
  For example:</p>
  <pre><code>row A 
  row B
  </code></pre>
  <p>after clicking row A, hidden rows will show under row A and above row B</p>
  <pre><code>row A
  hidden row 1
  hidden row 2
  row B
  </code></pre>
  <p>however, my code will always and only trigger the last row. If there are 15 rows in the table could click and show rows. Only the hidden rows of 15th row will show. No matter I click 1st row or 15th row, the web always show the 15th row.</p>
  <pre><code>                        var id = &quot;&quot;;
                          var count = 1;
                          var table = document.getElementById(&quot;header_table&quot;);
                          for (var i = 0; i &lt; r.length - 1; i++) {
                              id = 'detail_' + i;
                              console.log(id);
                              table.rows[count].addEventListener('click', function () {
                                  console.log(&quot;clicking row &quot; + i);
                                  $(&quot;.&quot; + id).toggle();
                              });
                              count = count + 6;
                          }
  </code></pre>