Access properties of an html element injected with AJAX

I am creating a small project which implements CRUDs on a MySQL table using PHP and jQuery.

The table is injected into the layout this way:

<?php

require '../connect.php';

$sql = "SELECT id, countryName, shortDesc FROM countries";
$result = mysqli_query($conn, $sql);

echo "<table>
          <tr>
              <th>Id</th>
              <th>Country</th>
              <th>Short description</th>
              <th>Actions</th>
          </tr>";

while ( $row = $result->fetch_assoc() ) {
        echo "<tr>
                  <td>".$row["id"]."</td>
                  <td>".$row["countryName"]."</td>
                  <td>".$row["shortDesc"]."</td>
                  <td>
                      <button id='show' value=".$row["id"].">Show</button>  
                      <button id='edit' value=".$row["id"].">Edit</button>    // value field added to pass id data
                      <button id='delete' value=".$row["id"].">Delete</button> 
                  </td>
              </tr>";
    }
    
echo "</table>";

$conn->close();
?>

I added value fields to the buttons because I was thinking of using this property to pass the row's ID to the JS script which should load the EDIT page.

I used the event delegation to access the button but just after that i have no idea about accessing the value property of the button.

On my jQuery scripts file I wrote this code to test:

// EDIT
$('#content').on('click', '#edit', function() {       // EVENT DELEGATION
    // THIS DOESN'T WORK
    var id = $('#content').children('#edit').attr("value");       

    alert( id );    // RETURN UNDEFINED
});

I tried to access a property of the content element and it work, so the problem should be that I cannot access his children like that (in a similar way to the even delegation with .on()).

there will probably be a more elegant way than this to solve the problem but in the meantime I would like to understand how to access the properties of AJAX injected HTML elements!

You cannot have same id for mutliple elements change it to class then just use $(this).attr("value") to get value of edit button which is clicked.

Demo Code :

$(document).on('click', '.edit', function() {
//get value
  var id = $(this).attr("value");
  console.log(id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Country</th>
    <th>Short description</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>1</td>
    <td>abc</td>
    <td>abc</td>
    <td>
    <!--added class-->
      <button class='show' value="1">Show</button>
      <button class='edit' value="1">Edit</button>
      <button class='delete' value="1">Delete</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>ab2c</td>
    <td>ab2c</td>
    <td>
      <button class='show' value="2">Show</button>
      <button class='edit' value="2">Edit</button>
      <button class='delete' value="2">Delete</button>
    </td>
  </tr>
</table>