display a dialog window for each element of table when clicking on a button in twig view

I have this code in my twig view for my symfony project:

      <th>DATA 1</th>
      <th>DATA 2</th>
      <th>DATA 3</th>
      <th>DATA 4</th>
      <th>DATA 5</th>
      <th>DATA 6</th>
    {% for currentData in arrayData %}
        <td>{{ currentData.data1}}</td>
        <td>{{ currentData.data2}}</td>
        <td>{{ currentData.data3}}</td>
        <td>{{ currentData.data4}}</td>
        <td>{{ currentData.data5}}</td>
        <td>{{ currentData.data6}}</td>
          <a><button class="btn btn-info btn-xs" id="show">Show Details</button></a> <!-- for open dialog window -->
          <a href="{{ path('editData', {'idData': currentData.idData }) }}"><button class="btn btn-warning btn-xs">Edit</button></a>
    {% endfor %}

<!-- dialog window-->
<dialog id="window">
  <div class="header">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
        <button class="btn btn-danger btn-sm pull-right" id="exit">Close</button>
  <div class="panel-body page-header">
    <!-- my content here -->

  (function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
    document.getElementById('exit').onclick = function() {

As you can see, it’s a basic html page. I display all my datas in a table in my loop {% for currentData in arrayData %}.
On this table, there are two types of button: Show Details button and Edit button. The Edit button works well, there’s no problem, my redirection works for all datas in my table and I can edit data I chose.

For the button Show Details: the desired behavior is that a window dialog opens in my page and contains every datas I need to display for each lines. But in fact, my dialog window works just on the first line of my table when clicking on Show Details, and when I click on another Show Details button of another line, nothing happened (really nothing).

Where am I wrong?

Source: html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.