This code would complete the table, that work find. The problem with this is that when i can show a dynamic popup only work in the first row but in anyelse don't work

<tr>
<td><img src="../mysql/img/<?php echo $fila['imagen'];?>" class="logoempresa" alt="Logo empresa"></td> 
<?php $fila['id'];?> 
<td><?php echo $fila['empresa'];?></td>
<td><?php echo $fila['puesto'];?></td>
<td><?php echo $fila['jornada'];?></td>
<td><?php echo $fila['salario'];?></td>
<td><?php echo $fila['zona'];?></td>
<td>
    <div class="popup-flex">
        <button id="popup-btn">Click Me</button>
    </div>

    <div id="popup-wrapper" class="popup-container">
        <div class="popup-content">
            <span id="close">&times;</span>
            <p class="observaciones"><?php echo $fila['observaciones'];?></p>
        </div>
    </div>
</td>

CodePudding user response：

try

<button id="<?= $fila['id'];?> " class="popup-btn">Click Me</button>

jquery

$('.popup-btn').on('click', function(e){
    e.preventDefault()
    let id = $(this).attr('id')
    //do magic
})

CodePudding user response：

Using vanilla Javascript you might try like this. Remove the ID attributes or convert to dataset versions such as data-id="popup-wrapper" rather than id="popup-wrapper" and use the click event triggered by the button to locate that element in the DOM tree. From that point you can navigate up the DOM tree and query once more to find the POPUP. Once you have identified the popup - open it or do something.. here I just toggle a className.

All the PHP tags below have been removed simply to facilitate the snippet/demo...

const clickhandler=function(e){
  let popup=this.parentNode.parentNode.querySelector('[data-id="popup-wrapper"]');
      popup.classList.toggle('popped');
      /* Open the popup... sing and dance! */
};


document.querySelectorAll('.popup-flex > [data-id="popup-btn"]').forEach( bttn=>bttn.addEventListener('click',clickhandler))

.popped{border:2px solid red;}
td{border:1px solid grey}

<table>
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">&times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">&times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
        
        <tr>
            <td><img src="//placekitten.com/100/100" class="logoempresa" alt="Logo empresa"></td> 
            <td>$fila['empresa']</td>
            <td>$fila['puesto']</td>
            <td>$fila['jornada']</td>
            <td>$fila['salario']</td>
            <td>$fila['zona']</td>
            <td>
                <div class="popup-flex">
                    <button data-id="popup-btn">Click Me</button>
                </div>

                <div data-id="popup-wrapper" class="popup-container">
                    <div class="popup-content">
                        <span data-id="close">&times;</span>
                        <p class="observaciones">$fila['observaciones']</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>