Buttons in datatable cal same ajax function()

Question

I have a completed table dynamically with a 2 buttons repeated for all rows, one delete, and one modification. I want to pressing the delete key, is called an ajax function that allows me to print the value associated with that button that is always different.

Ajax

$("#bt_elimina").on('click',function() {

                var adress = $(".bt_elimina").val();
                alert(adress);

            });

Html/php

<!--stampo la tabella $query è il risultato della query passato dal controller movimentoDiMagazzino_controller.-->
        <table id="tabella" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Codice Farmaco</th>
                    <th>Nome Farmaco</th>
                    <th>Quantità</th>
                    <th>Quantità di alert</th>
                    <th></th>
                </tr>
            </thead>
            <?php foreach ($query as $row): ?>
                <tr> 

                    <td><?php echo $row->aic; ?></td>
                    <td><?php echo $row->denominazione; ?></td>
                    <td><?php echo $row->quantita; ?></td>
                    <td><?php echo $row->alert; ?></td>
                    <td>

                        <button id="bt_modifica"
                                class="btn btn-default btn-xs"
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="">
                            <img src="<?php echo base_url(); ?>template/images/Modifica.png">
                        </button> 
                        <button id="bt_elimina"
                                class="btn btn-default btn-xs"
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="" 
                                value="<?php echo $row->aic; ?>">
                            <img src="<?php echo base_url(); ?>template/images/Elimina.png">
                        </button> 
                    </td>

                </tr>
            <?php endforeach; ?>


            </tbody>
        </table>

The call to ajax only works for the first button, then it no longer works and the buttons deaths result.

I believe that the problem is due to the fact that all the buttons have the same id, but how can I fix it? If I bet ajax to the class and not the id of the button, I can make the call, but I can not print the value of the button.

Thanks in advance

Answer 1

At first you should use id's only once. You're using the same ID for every table row. If you click any of them it will always refer to the first one. This because there has to be only one id and javasript wont look further then the first one.

Change the id of id="bt_elimina" to class="bt_elimina".

After that I would change the javascript to:

$("#tabella").on('click', '.bt_elimina', function( evt ) { var adress = $(this).val(); alert(adress); });

This shoul do the trick