title: Connect button to display data in a html table using Javascript
body: <p>I have a dynamically generated table that uses array of JS objects. I'm also adding a "View details" on each row. What I need is to be able to display data from the same array of objects in a different table. </p>
  
  <p>I tried to add event listener to the buttons, but they either iterate through all of the rows or don't display anything </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>function drawTable(tbody) {
  
    var tr, td;
    tbody = document.getElementById(tbody);
  
    for (var i = 0; i &lt; products.length; i++) // loop through data source
    {
      tr = tbody.insertRow(tbody.rows.length);
      td = tr.insertCell(tr.cells.length);
      td.innerHTML = products[i].ProductName;
      td = tr.insertCell(tr.cells.length);
      td.innerHTML = products[i].UnitsInStock;
      td = tr.insertCell(tr.cells.length);
  
  
      // View Details button
      td = tr.insertCell(tr.cells.length);
      button = document.createElement('button');
      button.textContent = ('View Details')
      td.appendChild(button)
  
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table-wrapper"&gt;
    &lt;table id="display-table" class="fl-table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Product Name&lt;/th&gt;
          &lt;th&gt;Units In Stock&lt;/th&gt;
          &lt;th&gt;View Details&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="table-data"&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  
  &lt;h2&gt;Product Details&lt;/h2&gt;
  &lt;div class="table-wrapper"&gt;
    &lt;table class="fl-table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Product Name&lt;/th&gt;
          &lt;th&gt;Product Category&lt;/th&gt;
          &lt;th&gt;Product Description&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="table-details"&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>