Замена элемента по нажатию кнопки

Предположим, есть таблица элементов. В одной из колонок указано время. Я хочу разместить рядом с временем кнопку, по нажатию которой текстовое значение превратится в с кнопками "сохранить", которая отправит ajax на проверку записи и сохранит ее в базе и "отмена" которая вернет ячейку в исходное состояние.
Проблема в том, что необходимо сделать это действие для одной ячейки (т.е. когда одна ячейка уже преобразована в input, то по нажатию кнопки на другой ячейке, старая должна вернуть исходное состояние т.е. одновременно можно редактировать только одну ячейку) и также я не знаю как определить, что нажатие кнопки "сохранить" "отменить" будут принадлежать именно к тому input рядом с которым они находятся.
Вот примерный код, на этапе превращения в input я не знаю как правильно дальше двигаться.

$(document).ready(function() { 
  $('.redact').on('click', function() { 
    var time = $(this).data('time'); 
    $(this).parent().replaceWith('<td><input value="' + time + '" type="time" step="2"/><button class="red-save">Сохранить</button><button class="red-cancel">Отменить</button></td>'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <th>Название</th> 
    <th>Длительность</th> 
  </tr> 
  <tr> 
    <td>Элемент 1</td> 
    <td>00:00:15 <button class="redact" data-time="00:00:15">редактировать</button></td> 
  </tr> 
  <tr> 
    <td>Элемент 2</td> 
    <td>00:00:05 <button class="redact" data-time="00:00:05">редактировать</button></td> 
  </tr> 
</table>