Ckeditor实例无法破坏？

How i can destroy ckeditor instance?

i have a problem ckeditor instance double. i will to destroy it.

i will check code console.log(editorID) same in the images. I see the textarea if i add chapter1 i have 2 instance is textarea0 and textarea1. If i add chapter2 i have 3 instance is textarea0, textarea1 and textarea2. I think this code is not destroy instance. Can you help me for this issue? Thank you. I'm apologize. I'm not good at English.

enter image description here

    function loadEditors() {
        var $editors = $("textarea.editors");
        console.log($editors.length);
        if ($editors.length) {
            $editors.each(function() {
                var editorID = $(this).attr("id");
                var instance = CKEDITOR.instances[editorID];

                if (instance) { instance.destroy(true); }
                console.log(editorID);
                CKEDITOR.replace(editorID);
            });
        }
    }

If i cut out ckeditor this code is work and attribute id textarea is true. See the code example.

    $(document).ready(function() {  

        //CKEDITOR.replaceAll('editors');   
        $("#chapter").on("click",function(){

            var i = $('.nav-tabs li').length;
            $('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
            $('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
            $('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);

            //loadEditors();
        });
        
/*     var $editors = $("textarea.editors");
        if ($editors.length) {
            $editors.each(function() {
                var instance = CKEDITOR.instances[$(this).attr("id")];
                if (instance) { $(this).val(instance.getData()); }
            });
        }*/
            
/*      function loadEditors() {
            var $editors = $("textarea.editors");
            console.log($editors.length);
            if ($editors.length) {
                $editors.each(function() {
                    var editorID = $(this).attr("id");
                    var instance = CKEDITOR.instances[editorID];
                    
                    if (instance) { instance.destroy(true); }
                    console.log(editorID);
                    CKEDITOR.replace(editorID);
                });
            }
        }*/     
        
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>

<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chapter0">
          <h3>Chapter 0</h3>
              <div class="form-group">
                <label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
                <div class="col-sm-10">
                  <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
                </div>
              </div>
  </div>
</div>

</div>

try this

setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);

I'm complete.

I add my code

$('.tab-pane:last-child').find('textarea').parent().find('div').remove();

and change function

function loadEditors() {
            var $editors = $("textarea.editors");
            console.log($editors.length);

            if ($editors.length) {
                $editors.each(function() {
                    var editorID = $(this).attr("id");
                    var instance = CKEDITOR.instances[editorID];

                    if(instance) { 
                        delete instance;
                    }else{
                        console.log(editorID);
                        CKEDITOR.replace(editorID);
                    }
                });
            }           
        }       


$(document).ready(function() {  

        CKEDITOR.replaceAll('editors');
            
        $("#chapter").on("click",function(){

            var i = $('.nav-tabs li').length;
            $('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
            $('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
            $('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
            $('.tab-pane:last-child').find('textarea').parent().find('div').remove();
            loadEditors();
        });
            
        function loadEditors() {
            var $editors = $("textarea.editors");
            console.log($editors.length);
            
            if ($editors.length) {
                $editors.each(function() {
                    var editorID = $(this).attr("id");
                    var instance = CKEDITOR.instances[editorID];
                    
                    if(instance) { 
                        delete instance;
                    }else{
                        console.log(editorID);
                        CKEDITOR.replace(editorID);
                    }
                });
            }           
        }       
        
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>

<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#chapter0" aria-controls="chapter0" role="tab" data-toggle="tab">Chapter 0</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="chapter0">
          <h3>Chapter 0</h3>
              <div class="form-group">
                <label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
                <div class="col-sm-10">
                  <textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
                </div>
              </div>
  </div>
</div>

</div>