ckeditor cannot load when append by click in php and jquery

Question

My Code is given below,

<div id="show_ck">
    <div style="width:80%; float:left;"> 
        <textarea name="test_0" class="ckeditor" ></textarea> 
    </div> 
    <div style="width:20%; float:left;"> 
        <img class='btnAddMore' width='30px' height='30px' src='img/add_btn.png' alt='Add' /> 
    </div>
    <div style="clear:both;"></div>
</div>

<script src="jquery-1.11.2.js"> </script>
<script src="ckeditor/ckeditor.js"> </script>
<script>
$(document).ready(function(){
    var count = 1;
    $(document).on('click','.btnAddMore', function() {
        var add_more = '<div> <textarea name="test_'+count+'" class="ckeditor" ></textarea> </div>';
        count++;
        $("div#show_ck").append(add_more);
    });
});
</script>

First Time , CK EDITOR load successfully but when i click plus image, CK EDITOR cannot load.

How to load CK EDITOR when click plus image( Every CK EDITOR will be). How to solve it. Please any help?

Answer 1

When adding new ckeditor dynamically, you can do it by replacing an existing element on the fly.

$(document).ready(function(){
    var count = 1;
    $(document).on('click','.btnAddMore', function() {
       var add_more = '<div id="ck_'+count+'"><textarea id="replace_element_'+count+'"></textarea></div>';
       $("div#show_ck").append(add_more);
       CKEDITOR.replace( 'replace_element_' + count );
       count++;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.4.7/standard-all/ckeditor.js"> </script>
<div id="show_ck">
    <div style="width:80%; float:left;"> 
        <div id="ck_0"><textarea name="test_0" class="ckeditor" id="editor_0" ></textarea></div> 
    </div> 
    <div style="width:20%; float:left;"> 
        <img class='btnAddMore' width='30px' height='30px' src='img/add_btn.png' alt='Add' /> 
    </div>
    <div style="clear:both;"></div>
</div>