CKEditor 4 - Добавляйте и уничтожайте динамически, возвращая старое значение

Question

Я пытаюсь динамически добавлять и уничтожать CKEditor4 в ячейке таблицы, но сталкиваюсь с проблемами и надеюсь, что вы мне поможете. Я создал образец на JSFiddle, чтобы было легче помогать (ссылка ниже). Пожалуйста, обратитесь к JSFiddle

JSFiddle Link

Обычно, когда пользователь щелкает текст в столбце (3), он изменяется на поле CKEditor с двумя вариантами (Отмена или Сохранить) сверху. Если пользователь нажмет кнопку «Отмена», он вернет исходное состояние (удалите редактор). Если пользователь нажимает кнопку «Сохранить», он будет использовать Ajax для сохранения нового содержимого, а затем обновит TD новым содержимым (из CKEditor) и закроет окно редактора.

Код изначально работает для добавления CKEditorкогда пользователь щелкает ячейку таблицы, но кнопки Отмена или Сохранить не работают должным образом. Пожалуйста, помогите и спасибо заранее.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>

<script>
var editor;
function CKEditorChange(name) {
  CKEDITOR.replace(name);
}

var i = 1;
var editItemDetailContent = "";
$(function() {
  $(".editItemDetail").click(function(e) {
    e.preventDefault();
    var currVal = $(this).html();
    var currID = $(this).attr("dataID");
    console.log(" --- currID: " + currID);
    //console.log("currVal: " + currVal + " --- currID: " + currID);
    $(this).html('<button type="button" class="cssEditItemDetail" id="cancelItemDetail_' + currID + '" dataID="' + currID + '">Cancel</button> | ');
    $(this).append('<button type="button" class="cssEditItemDetail" id="saveItemDetail_' + currID + '" dataID="' + currID + '">Save</button>');
    $(this).append('<textarea class="cssEditItemDetail" id="editorItemDetail_' + currID + '" >' + currVal +'</textarea>');
    $(this).append('<input type="hidden" class="cssEditItemDetail" id="hiddenItemDetail_' + currID + '" value="' + currVal +'">');
    CKEditorChange('editorItemDetail_' + currID);
  });

    $(document).on("click", ".cssEditItemDetail", function(e)
    {
        event.stopPropagation();
        event.stopImmediatePropagation();
        var dataID = $(this).attr("dataID");
        var ActionName = $(this).text();
        console.log("dataID: " + dataID + " --- ActionName: " + ActionName);

        if (ActionName == "Cancel")
        {
            var preVal = $("#hiddenItemDetail_" + dataID).val();  // Getting the value previously stored in the hidden field
            console.log("preVal: " + preVal);

            CKEDITOR.instances["editorItemDetail_" + dataID].destroy(true);   // Destroy the textarea with formatting
            var td = $(this).closest("td");
            td.html(preVal);  // Change the TD content back to original value
        } else if  (ActionName == "Save") {
            var updatedContent = CKEDITOR.instances["editorItemDetail_" + dataID].getData()
            console.log("updatedContent: " + updatedContent);
            console.log("Use AJAX to update the DB with new value ");
            console.log("Update the table <TD> with new content and close the editor box ");
        } else {
        return false;
        }
    })

});
</script>

 <table style="width:100%" border="1">
    <tbody>
      <tr id="fieldList">
        <th width="10%">Field1</th>
        <th width="10%">Field2</th>
        <th width="80%">Detail 1</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td class="editItemDetail" dataID="1"><h2>Test1</h2><br/><b>Detail 1</b></td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td class="editItemDetail" dataID="2">Detail 2</td>
      </tr>
    </tbody>
</table>