在类的数据库动态项目中显示“所见即所得”编辑器

Question

我正在使用报价模块，可以在其中添加单个或n个订单项。订单项详细信息（例如名称，说明，价格）是从项目主目录动态生成的。我正在使用jquery从数据库中添加多个项目。

对于项目描述，我尝试使用CKEditor，它仅适用于第一个项目，不适用于其他项目。

$(".delete").on('click', function() {
  $('.case:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false);
  check();
});
var i = $('table tr').length - 1;
$(".addmore").on('click', function() {
      count = $('table tr').length - 1;
      var data = "<tr><td><input type='checkbox' class='case'/></td><td><input class='form-control' type='text' id='productname_" + i + "' name='productname[]'/></td><input class='form-control' type='hidden' id='productcode_" + i + "' name='productcode[]'/> <td><textarea class='form-control ckeditor' id='description_" + i + "' name='description[]' ></textarea></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
  <th><input class='check_all' type='checkbox' onclick="select_all()" />
  </th>
  <th>Name</th>
  <th>Description</th>
  <th>Price</th>
  </tr>

  <tr>
    <td><input type='checkbox' class='case' /></td>
    <input type="text" class="form-control" id="productname_1" name="productname[]"></td>
    <input type="hidden" class="form-control" id="productcode_1" name="productcode[]">
    <td><textarea class="form-control ckeditor" id="description_1" name="description[]"></textarea></td>
    <td><input type="text" class="form-control price" id="price_1" name="price[]"></td>
    <td><button type="button" class='btn btn-danger delete'>-</button></td>
    <td><button type="button" class='btn btn-success addmore'>+ </button></td>
  </tr>
</table>

如何显示所有订单项的CKEditor？