Попытка загрузить добавление текстовых полей с помощью tinymce

Я работаю с формой, которая имеет одно поле текстовой области по умолчанию, и я использую TinyMCE с этим полем, которое работает без каких-либо проблем, кроме того, у меня есть несколько необязательных полей текстовой области, которые пользователь может добавить, нажав кнопку - эта кнопка при нажатии добавляет форма с тем же типом поля textarea, но проблема в том, что недавно добавленное необязательное поле textarea загружается не с TinyMCE, а с простым полем textarea HTML

Это то, что я делаю

Поле textarea по умолчанию в HTML-форме

<div class="form-group"> 
    <label for="service_overview">Service Overview *</label> 
    <div class="input-group"> 
        <div class="input-group-addon"> 
            <i class="glyphicon glyphicon-user"></i> 
        </div> 
        <textarea rows="10" cols="50" name="service_overview[]" aria-required="true" required="s" placeholder="Service Overview" class="form-control">
        </textarea> 
        <span class="input-group-addon danger"> 
            <span aria-hidden="true" class="glyphicon glyphicon-remove"></span> 
        </span> 
    </div> 
</div>

Код jQuery для добавления другого поля textarea в форму

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".services"); //Fields wrapper
    var add_button      = $(".add_service_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
            initMCEall();
            $(wrapper).append('<div><div class="clearfix">{{ Form::button("Remove service", ["class" => "btn btn-danger remove_field"]) }}</div><div class="form-group"> {{ Form::label("service_title", "Service Title *") }} <div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </div> {{ Form::text("service_title[]", null, ["class" => "form-control", "placeholder" => "Service Title", "required" => "s", "id" => "itName", "aria-required" => "true"]) }} <span class="input-group-addon danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </span> </div> </div> <div class="form-group"> {{ Form::label("service_overview", "Service Overview *") }} <div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </div> {{ Form::textarea("service_overview[]", null, ["class" => "form-control", "placeholder" => "Service Overview", "required" => "s", "aria-required" => "true"]) }} <span class="input-group-addon danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </span> </div> </div> <div class="form-group"> <div class="fileinput fileinput-new" data-provides="fileinput"> <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;"> <img data-src="holder.js/100%x100%" alt="..."></div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div> {{ Form::file("service_image[]") }} </div> </div></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
    })
});
</script>

Код для запуска TinyMCE с текстовыми областями

<script type="text/javascript">
function initMCEall(){
  tinyMCE.init({
    mode : "textareas"
  });
}
// add all textarea elements to document
initMCEall();
</script>

Что я хочу, так это то, что когда пользователь загружает другую текстовую область, редактор TinyMCE также должен быть интегрирован с добавленной текстовой областью, как и текстовая область по умолчанию.