Onclick конвертирует div в поля ввода и отправляет обновленное значение через ajax

Question

Этот код изменяет тег <p> на inputfields.

У меня есть данные, которые поступают из database в paragraph теги в tables.

Когда я нажимаю на нее, она меняется на inputfields.

После изменения значения я хочу обновить значение в базе данных.

Для этой цели я хочу отправить ajax request с теми значениями, которые я изменяю на inputfields.

    	/**
      We're defining the event on the `body` element, 
      because we know the `body` is not going away.
      Second argument makes sure the callback only fires when 
      the `click` event happens only on elements marked as `data-editable`
    */
    $('body').on('click', '[data-editable]', function(){
      
      var $el = $(this);
                  
      var $input = $('<input/>').val( $el.text() );
      $el.replaceWith( $input );
      
      var save = function(){
        var $p = $('<p data-editable />').text( $input.val() );
        $input.replaceWith( $p );
      };
      
      /**
        We're defining the callback with `one`, because we know that
        the element will be gone just after that, and we don't want 
        any callbacks leftovers take memory. 
        Next time `p` turns into `input` this single callback 
        will be applied again.
      */
      $input.one('blur', save).focus();
      });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p data-editable>First Element</p>
     <p data-editable>Second Element</p>
     <p>Not editable</p>