add text editor dynamically on click add button add new and on click remove button remove field

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.ckeditor.com/4.11.1/full/ckeditor.js"></script>

<!-- <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script> -->

</head>

<body>

<div class="input_fields_wrap">

<button class="add_field_button">Add More Fields</button>

<div><input type="text" name="mytext[]"><br><textarea class="form-control ckeditor" name="title[]" required></textarea></div>

</div>

<script>

$(document).ready(function() {

var max_fields = 10; //maximum input boxes allowed

var wrapper = $(".input_fields_wrap"); //Fields wrapper

var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count

$(add_button).click(function(e) { //on add input button click

e.preventDefault();

if (x < max_fields) { //max input box allowed

x++; //text box increment

$(wrapper).append('<div><input type="text" name="mytext[]"/><br><textarea id="editor' + x + '" class="form-control" name ="title[]" required></textarea><br><a href="#" class="remove_field">Remove</a></div>'); //add input box

}

addTinyMCE();

});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text

e.preventDefault();

$(this).parent('div').remove();

x--;

});

function addTinyMCE() {

// Initialize

CKEDITOR.replace('editor' + x);

}

});

</script>

</body>

</html>