Не удается отобразить определенный идентификатор после редактирования в JQuery и AJAX

Question

У меня есть edit_button, который берет значения из моей базы данных и отображает его на странице HTML, а также у меня есть update_button для обновления определенных данных id. А также замените button и input-field после нажатия 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);
   }
 )};
)};

И у меня есть другая функция для запуска данных, как показано ниже:

$(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);
)};

Моя кнопка отображает определенный id, когда я предупреждаю, но мой ввод не делает. Когда у меня в базе данных более 1 данных, мой input предупреждает только первое значение, которое я нажал изменить, но моя кнопка оповещает о конкретном идентификаторе, когда также имеется более 1 данных. Моя кнопка data-id верна, а моя input - нет. И в моем html:

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