JavaScript не может отображать определенный идентификатор после редактирования в JQuery и AJAX

у меня есть 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>