PHP Foreach jquery button- Only One Row Firing

Question

I have a php foreach statement which works. I have a jquery button on one of the echos. Below that the associated jquery function. On page load only the first button fires and the rest below don't. can anyone help?

//include 'database.php';
               $pdo2 = Database::connect();
               $sql2 = 'SELECT * FROM animals WHERE riderid = '.$data[id].'';
               foreach ($pdo2->query($sql2) as $row) {
                        echo '<tr>';
                        echo '<td>'. $row['hp'] . '</td>';
                        echo '<td>'. $row['hpname'] . '</td>';
                        echo '<td>'. $row['hpage'] . '</td>';
                        echo '<td>'. $row['hpcolour'] . '</td>';
                        echo '<td>'. $row['hpmicro'] . '</td>';
                        echo '<td>';
                        //echo '<a class="btn" href="read.php?id='.$row['id'].'">More Info</a>';
                        //echo ' ';
                        echo '<a class="btn btn-success" href="update.php?id='.$row['id'].'">Update</a>';
                        echo ' ';
                        echo '<button class="btn btn-danger" id="complexConfirm">Delete Record</button>';
                        echo '</td>';
                        echo '</tr>';
               }
               Database::disconnect();
              ?>

                </div>

                </tbody>
                </table>

            <script>

            $("#complexConfirm").confirm({
            title:"Are You Sure You Want To Delete this <?php echo $data['hp1'];?> called <?php echo $data['hpname1'];?>?",
            text: "Please Note that this Record will be archived just in Case.",
            confirm: function(button) {
                button.fadeOut(2000).fadeIn(2000);

                $.ajax({
                url: 'deletehorse.php?id=<?php echo $id;?>&hp=hp1&hpname=hpname1&hpage=hpage1&hpcolour=hpcolour1&hpmicro=hpmicro1',
                success: function(){
                //alert('done');
                window.location.reload(true);
            }
            });


            },
            cancel: function(button) {
                button.fadeOut(2000).fadeIn(2000);

            },
            confirmButton: "Yes I am",
            cancelButton: "No"
            });

        </script>

Answer 1

The buttons all have the same ID, which won't bind properly using javascript. Try changing the ID to a class, and binding to the class instead.