title: JS onclick event in table Collapsibles/Accordion
body: <p>I am trying to find out how to create onClick event in a table, that works according to the row clicked, displaying hidden siblings.</p>
  <p>This table comes from a DB (ajax call)</p>
  <pre><code>          $(&quot;#table-data&quot;).append(
              `&lt;tr id=&quot;${response.data[i][&quot;id&quot;]}&quot;&gt;
  
              &lt;td id=&quot;nameTag${response.data[i][&quot;id&quot;]}&quot;&gt; ${response.data[i][&quot;firstName&quot;] + &quot; &quot; + response.data[i][&quot;lastName&quot;]}&lt;/td&gt;
              &lt;td&gt; ${response.data[i][&quot;id&quot;]} &lt;/td&gt;
              &lt;td&gt; ${response.data[i][&quot;jobTitle&quot;]} &lt;/td&gt;
              &lt;td&gt; ${response.data[i][&quot;email&quot;]} &lt;/td&gt;
              &lt;td&gt; ${response.data[i][&quot;department&quot;]} &lt;/td&gt;
              &lt;td&gt; ${response.data[i][&quot;location&quot;]} &lt;/td&gt;
  
              &lt;/tr&gt;`
  </code></pre>
  <p>Here is where I want to get the row on click, but the id should be nameTag[i], where i is the row id.</p>
  <pre><code>  const nameTag = $(&quot;#nameTag1&quot;); //example: if click on row 1 should be this ID.
    const nameTag = $(`#nameTag${response.data[i][&quot;id&quot;]}`); //I tried this way using it inside the ajax call. but it makes open and close row 12 to the infinite... 
  
    $(document).on(&quot;click&quot;, nameTag, function () {
      
      $('#nameTag1').siblings().toggle(&quot;slow&quot;);
  
    });
  </code></pre>
  <p>I tried this for loop but also doesn't work</p>
  <pre><code>     const table = document.getElementById('table');
       for (var i = 0, row; row = table.rows[i]; i++) {
            //do something....
          }  
  </code></pre>
  <p>If I use fixed ID values for test, like onClick just for nameTag1, opening his siblings, when i click in any row open row 1...</p>
  <p>I don't know, but probably I am going to the wrong way, maybe I should use just CSS...</p>