Problem with Jquery button

Question

Guys I have a problem in my code that may be simple to solve but I ended up getting stuck, I’m doing a crud and the add, edit and delete buttons added via Controller in the construction of table cells:

My buttons were repeated per line, that is, for each line of my list of additions in the database, there are the three buttons;

Using Jquery I captured the id of my add button and redirect to the page responsible for insertion in the database, but only my add button from the first line works, the other buttons have no function. Could someone please explain to me what I did wrong? Follow my Jquery code:

Answer 1

This happens because all "Add" buttons have the same ID. The same happens with the "Delete" and "Edit" buttons. In this case, only the first button is selected and, consequently, the event will only be attached to it. You could simply use classes instead of Ids to select buttons. The code would look like this:

PHP

echo "<td>
    <button type="button" name="add" class="btn btn-success btn-floating add">
        <i class="fa-plus fa"></i>
    </button>
    <button type="button" name="delete" class="btn btn-success btn-floating delete">
        <i class="fa-plus fa"></i>
    </button>
    <button type="button" name="edit" class="btn btn-success btn-floating edit">
        <i class="fa-plus fa"></i>
    </button>
</td>";

Javascript

$('.add').click(function() {
    window.location.href = 'inserepessoa.php';
});