【Rails/javascript(jQuery)】 투고 내용 편집의 비동기화

$(function() {
  var InlineEdit;
  var values = {
    id: "",
    content: "",
  }

  function reBuild(blog) {
    var html = `<div class="content__message__box"><p class="lower-message__content">${ blog.content }</p></div>`

  InlineEdit.removeClass('InlineEdit-active').empty().append(html);
  }

  $(document).on("click", ".content__message__InlineEdit-cancel", function () {
    reBuild(values);  
  });

  $(document).on("click", ".content__message__InlineEdit-save", function () {

    var url = location.href + "/" + values.id;
    var input = InlineEdit.find('input').val();
      $.ajax({
        url: url,
        type: "POST",
        data: {'id': values.id,
        'content': input,
        '_method': 'PATCH'} ,  // ポイント①：非同期でテキストの編集を行う場合には、'_method': 'PATCH'を使用
        dataType: 'json'
      })
      .done(function(data) {
        reBuild(data);
      })

      .fail(function() {
        alert('message edit error');
      })
  });

  $(document).on("click", ".edit_id", function () {
    InlineEdit = $(this).parent().siblings(".content__message__box"); // 「.parent().siblings(".content__message__box")」で「this（.edit_id）」の親兄弟であるcontent__message__boxクラスを取得
    values = {
      id: InlineEdit.attr("data-edit-id"),
      content: InlineEdit.find('.lower-message__content').text(),
    }
      var input_element = '<input class="content__message__InlineEdit-input" type="text" value="'+values.content+'">';  // 「value='+values.content+'」でメッセージを入れたままinputボックス立ち上げ
      var button_element = '<ul class="content__message__InlineEdit-buttons"><li class="content__message__InlineEdit-cancel"><i class="fa  fa-times"></i></li><li class="content__message__InlineEdit-save"><i class="fa fa-check-circle"></i></li></ul>';  // 編集内容のキャンセル、編集内容の保存ボタンの立ち上げ
      InlineEdit.addClass('InlineEdit-active').empty().append(input_element).append(button_element).find('input').focus();
  });
});

.contents
  -@blogs.each do|blog|
    .content{"data-blog-id": "#{blog.id}"}
      .content__messages
        .content__message
          .content__message__box{"data-edit-id": "#{blog.id}"}
            -# カスタムデータ属性である"data-id"の値（value）としてeach文で渡された変数（blog.id）を設定
            - if blog.content.present?
              %p.lower-message__content
                = blog.content
          .content__message__info
            %p.message__upper-info__talker
              ユーザ：
              = blog.user.name
            %p.message__upper-info__date
              投稿日時：
              = blog.created_at.strftime("%Y/%m/%d %H:%M")

          .content__message__edit-and-delete-btn
            %p.edit_id
              Edit

            =link_to "/blogs/#{blog.id}", method: :delete, class: "delete_id" do
              Delete

      .pict
        =image_tag blog.image.url, class: 'pict__img' if blog.image.present?