Отображение ввода html-формы в объект javascript внутри вновь сформированного элемента

Question

У меня есть следующий HTML. Пожалуйста, взгляните на это, и я объясню проблему, как и когда мы пойдем вместе.

<table>
<tbody>
<tr id="<?php echo $record['id']?>" style="...">
   <td><?php echo $record['id']; ?></td>
   <td><?php echo $record['url']; ?></td>
   <td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td>
</tr>
</tbody>
</table>

Здесь я пытаюсь достичь того, что когда я нажимаю кнопку "Редактировать", он очищает это поле и создает вместо него новые пустые поля, в которые эти данные можно вводить снова, а вместо кнопки редактирования появляется кнопка обновления.

Вот как выглядит функция редактирования:

<script>
function edit(id){
  var element = document.getElementById(id);
  $(element).empty();
  $(element).append("<td><input  name='id' value="+id+" disabled></td>" +
                    "<td><input type='text' name='url' ></td>" +
                    "<td><input type='text' name='title'></td>" +
                    "<td><input type='button' value='Update' onclick='testFunction()'></td>");
}

Кнопка обновления запускает функцию с именем testFunction. Теперь в этой функции testFunction я хочу отправить новые значения в новую форму, которую я создал с помощью jQuery, чтобы я мог отправлять эти значения в MySQL, чтобы новое значение title обновлялось для данного идентификатора.

Пожалуйста, просмотрите код и скажите, как мне решить эту проблему?

var testFunction = function(newID){
        console.log("This is the NEW id of the object that we are changing----->");
        console.log(newID);
        console.log("--------------------------END------------------");
        $.post( "update", { id: newID})
            .done(function( ) {
                document.getElementById(id).style.display = "none";
            });
    };
</script>

Answer 1

//test record
var record = {
  id: 12345,
  title: 'Some title',
  url: 'https://stackru.com/posts/45861223/edit'
};

function action(id) {
  var $element = $('#' + id),
    $title = $('[name=title]', $element),
    $url = $('[name=url]', $element),
    $btn = $('[type=button]', $element),
    isUpdate = ($btn.attr('value') != 'Edit');


  $title.prop('readOnly', isUpdate);
  $url.prop('readOnly', isUpdate);
  $btn.attr('value', isUpdate ? 'Edit' : 'Update');

  if (isUpdate) {
    // show some loading mask
    $.post("update", {
        title: $title.val(),
        url: $url.val(),
        id: id
      })
      .done(function() {
        // here you have the new id from the server
        // hide the loading mask
      });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="12345">
      <td><input type='text' name='title' value="Some title" readOnly></td>
      <td><input type='text' name='url' value="https://stackru.com/posts/45861223/edit" readOnly></td>
      <td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
    </tr>
  </tbody>
</table>