Cannot display specific ID after edit in JQuery and AJAX

I have an edit_button that takes values from my database and show it on the HTML page, and also I have an update_button to update the specific id data. And also replace button and input-field after clicking edit

$(document).on("click", ".edit", function () {
 var id = tr.attr('id');
 $.ajax({
   type: "GET",
   url: '/myURL/'+id,
   success: function(director) {
     var updateButton = "<button id="my_button" data-id="'+director.id+'">;
     var input = "<input type="text" id="my_input" data-id="'+director.id+'">;
     $("#create").replaceWith(updateButton);
     $("#name").replaceWith(input);
   }
 )};
)};

And I have another function to trigger the data like below:

$(document).on("click", "#my_button", function () {
  var id = $(this).data('id');
  //alert(id);
)};

$(document).on("blur", "#my_input", function () {
  var id = $(this).data('id');
  //alert(id);
)};

My button displays the specific id when I alert, but my input doesn't. When I have more than 1 data in the DB, my input only alert the first value that I clicked edit but my button alert the specific id when there is more than 1 data also. My button data-id is correct but my input doesn't. And in my html:

<tbody>
  @php $inc = 1; @endphp
  @foreach($directors as $director)
    <tr id="">
      <td></td>
      <td></td>
      <td><a class='edit'><i class='ft_edit'></i></a></td>
     </tr>
   @endforeach
</tbody>

via Chebli Mohamed