I'm not getting the different row id assigned to each delete button when clicking the button and getting id as alert message using jquery in php?

Question

I am working on MVC structure where i am using php for backend, Smarty template engine for Frontend (VIEW) and jquery for handling events. I'm doing CRUD operation using Smarty,jquery,PHP and MySQL PDO. Here, i created a tpl file to show the users data in a separate row and each row contains a delete and update button. I assigned each user's id to these buttons. Now when user click on this button i'm checking if the button contains the right user id or not as alert message holding user id in jquery handler. But what i got is the only the last user id on clicking the last entered user's delete button/update button.Others row of table containing the delete/update button doesn't show alert message (i.e. nothing happens when i clicks the button). Please help me to get the id as alert message when i click any button on any row?

> record.tpl

<div class='container'>
    <h1>Users Record</h1>
    
    <table style="width:100%;color:white;">
        <thead>

        <tr bgcolor="blue">
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Date of Birth</th>
            <th>Entry Date</th>
            <td>Edit</td>
            <td>Delete</td>
        </tr>
        </thead>
        
        {foreach from=$data key=myId item=i }
        <tr bgcolor="{cycle values="lightblue,azure"}">
            <td>{$i.id}</td>
            <td>{$i.name}</td>
            <td>{$i.email}</td>
            <td>{$i.dob|date_format:"%e %b, %Y"}</td>
            <td>{$i.created_at|date_format:"%e %b, %Y %H:%M:%S"}</td>
            <td><button type='button' id='edit-data' data-id={$i.id}>&#9998;</button></td>
            <td><button type='button' id='delete-data' data-id={$i.id}>&#10006;</button></td>
        </tr>
        {foreachelse}
        <tr>
            <td>No records</td>
        </tr>
        {/foreach}
    </table>

</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#edit-data').click(function(){
            var id = $(this).data('id');
            alert(id);
        });
    });

</script>

Below is my Controller > index.php

<?php
class guestbook extends controller
{
    public $error = array();
    //var $error = null;

    function __construct()
    {
        parent::__construct();
    }
    function display()
    {
       
        $data = $this->objDBF->getEntries();
        echo "<pre>";
        print_r($data);
        $this->smarty->assign('data', $data);
        $this->smarty->display('record.tpl');
    }
}

And the data i am getting from my database which i'm printing as print_r($data) is -

Array
(
    [0] => Array
        (
            [id] => 29
            [name] => Tony Stark
            [email] => [email protected]
            [dob] => 1987-03-12
            [created_at] => 2020-09-30 18:18:37
        )

    [1] => Array
        (
            [id] => 28
            [name] => Howard Stark
            [email] => [email protected]
            [dob] => 1895-07-12
            [created_at] => 2020-09-30 18:07:05
        )

    [2] => Array
        (
            [id] => 27
            [name] => Ramesh Jain
            [email] => [email protected]
            [dob] => 1996-05-18
            [created_at] => 2020-09-30 18:03:25
        )

    [3] => Array
        (
            [id] => 17
            [name] => Ho Yinsen
            [email] => [email protected]
            [dob] => 1896-05-14
            [created_at] => 2020-09-30 14:26:30
        )
)

So when i click the first row delete/update button it shows the users id as alert message say userId=29 but when i go to the 2nd row or any other row of table and clicks on the delete/update button then alert message doesn't pop up.

Anyone please help me to solve this issue. Thanks in advance!(^_^)