Как изменить текущее значение элемента в таблице при нажатии?

Я хочу встроить редактирование текущего значения td. Например, предположим, что у меня есть 3 строки в моей таблице, и я хотел бы отредактировать 2 строки, поэтому, когда я нажимаю на вторую ссылку редактирования td, редактируемое текстовое поле отображается в текущем столбце имени и позволяет редактировать.

Вот мой код:

HTML

<table>
    <thead>
        <td>Edit</td>
        <td>Name</td>
        <td>City</td>
        <td>Email</td>
    </thead>

    <tr>
        <td><a href = "javascript:void(0);" class = "edit_agent" id = "edit_agent">Edit</a></td>
        <td id = "log_name" class=='log_name' contenteditable = "true" data-old_value  = "<?php echo $value->name; ?>" ><?php echo $f_name; ?></td>
        <td><?php echo $city; ?></td>
        <td><?php echo $email; ?></td>
    <tr>

</table>

JavaScript

jQuery(".edit_agent").click(function(){

    var oldVal = jQuery('.log_name').attr('data-old_value');
    var $input = jQuery('<input>', {
        value: oldVal,
        type: 'text',
        blur: function() {
            jQuery(this).oldVal
        },
        keyup: function(e) {
            if (e.which === 13) $input.blur();
        }
    }).appendTo( jQuery(this).parents('tr').find('td:eq(3)') ).focus();

    return false;
});

Я пробовал приведенный выше код, но не работал должным образом.