title: how to dynamically add and remove tinymce
body: <p>I have add button and a remove button that dynamically add and remove tinymce textarea. And it works. The problem with my code is whenever i remove a tinymce textarea and add it back. The tinymce does not get initialize with the textarea.</p>
  
  <p>A link to my code is <a href="https://jsfiddle.net/917rx8jp/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>my html code</p>
  
  <pre><code> &lt;ol type="A" id="list"&gt;
              &lt;li id="element1"&gt;                             
                 &lt;input type="radio" name="optionanswer" id="answer1" value="1" &gt;
  
                   &lt;textarea  class="ans" name="option1" id="option1" rows="2" cols="3"&gt;
  
                   &lt;/textarea&gt;                                                                                          
  
              &lt;/li&gt;
          &lt;/ol&gt;
  
          &lt;button class="btn btn-primary" type="submit" id="addalt"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;  Add Alternative&lt;/button&gt;      
  </code></pre>
  
  <p>my javascript code</p>
  
  <pre><code>$(document).ready(function(){
  
  // function to run tinymce
  function tinym(){
  tinymce.init({
               selector: 'textarea',
  
               menubar:false,
         statusbar: false,
          toolbar: "charmap",
  
                plugins: [
                ' charmap'
                ],
  
                content_css: [
                  '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                  '//www.tinymce.com/css/codepen.min.css'
                ]
               });
  }
  tinym();
       $(document).on("click", "#addalt" , function() {
           event.preventDefault();
           var ul = document.getElementById("list"); 
  
           var li = document.createElement("li");
             var children = ul.children.length + 1
           //li.setAttribute("id", "element"+children)
           //console.log(children);
           var idname='answer'+children;
           var textid='option'+children;
  
  
           $("ol").append("&lt;li&gt; &lt;input type='radio'name='optionanswer' id=" + idname + " /&gt;  &lt;textarea  rows='2' cols='3' name=" + textid + " id=" + textid + "&gt;  &lt;/textarea&gt;  &lt;a href='javascript:void(0);' class='remove'&gt;&amp;times;&lt;/a&gt;&lt;/li&gt;"); 
           tinym();
  
  
       });
  
       $(document).on("click", "a.remove" , function() {
           $(this).parent().remove();
  
  
       });
  
       });
  </code></pre>