Quill Editor - не удалось отобразить содержимое в редакторе другого Div

Question

Привет! Я разрабатываю страницу, которая содержит текстовый редактор Quill Rich.Когда я нажимаю кнопку Изменить , я пытаюсь получить содержимое класса .content.После редактирования обновите содержимое до того же класса .content через редактор Quill.Еще ясно:

1. Во-первых, я хочу редактировать содержимое в классе .content с помощью редактора quill.
2. Во-вторых, я хочу обновить отредактированное содержимое в тот же .content класс по кнопка обновления щелчок.
3. В-третьих, поскольку я собираюсь использовать это в разговоре, как генерировать редакторы для каждого сообщения?Так что я могу редактировать все сообщения отдельно.Но теперь я показал только одно сообщение в скрипке.

Мне нужна ваша помощь.Спасибо:)

$(function() {
  //Bootstrap tooltip
  $('[data-toggle="tooltip"]').tooltip();
  var toolbarOptions1 = [
    ['bold', 'italic'],
    [{
      'header': 2
    }],
    [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }],
    ['clean']
  ];

  var quill1 = new Quill('.conversation-editor', {
    modules: {
      toolbar: toolbarOptions1
    },
    placeholder: 'Compose...',
    theme: 'bubble'
  });

  var justHtmlContent = document.getElementById('justHtml');
  var content = document.getElementsByClassName('content');

  quill1.on('editor-change', function() {
    var justHtml = quill1.root.innerHTML;
    justHtmlContent.innerHTML = justHtml;
  });

  $(".update-conversation-btn").on("click", function() {
    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());
    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();
    $(this).closest(".conversation-right").find(".content").show();
  });

  $(".delete-conversation").on("click", function() {
    $(this).tooltip("hide");
    $(this).closest(".coversation-wrap").remove();
    return false;
  });

  $(".edit-conversation").on("click", function() {
    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();
    $(this).closest(".coversation-wrap").find(".content").hide();
    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());
  });

});

body {
  background: #ccc !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="coversation-wrap d-flex">
        <div class="coversation-left">
          <img avatar="pk prabu">
        </div>
        <div class="conversation-right w-100">
          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"
              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>
          <h4>Pk prabu</h4>
          <div class="content">
            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>
            <div class="attached"></div>
          </div>
          <p id="justHtml" hidden="hidden"></p>
          <!-- Create the editor container -->
          <input name="editor" type="hidden">
          <div class="conversation-editor-wrp">
            <div class="conversation-editor"></div>
            <div class="d-flex mt-2 justify-content-end">
              <div class="mr-2">
                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>
              </div>
              <div>
                <a href="#" class="conversation-cancel">Cancel</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>