To append a text area in form with jQuery

Question

I am trying to append a text area in to the form. But the form is also appended first time. Lets look to my code.

  jQuery('.addeducation-sym').click( function(){
    var tiny_mce = '<textarea name="content"></textarea>';
    jQuery('.extra-form').clone().appendTo('#edu-form');
    tiny_mce.appendTo('#edu-form .extra-form');
  });

In the above code when i click the '.addeducation-sym' botton i got the form name '.extra-form'. This was a clone of a html form like bellow.

        <div  class="extra-form">
            <label for="education-info">Extra Educational Information</label>
            <input type="text" name="coursename" id="firstname" value="coursename" />
            <input type="text" name="institutename" id="institutename" value="institutename" />
            <input type="text" name="startdate" id="startdate" value="startdate" />
            <input type="text" name="enddate" id="enddate" value="enddate" />
        </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

After that i want to append another html code which is stored in a variable called 'tiny_mce'. But i could not find any update in my code. So please let me know what is the way to append a '' to the "extra-form" after it is cloned.

Answer 1

you could do:

jQuery(document).on("click", '.addeducation-sym', function(){
    jQuery('.extra-form').clone(true).appendTo('#edu-form');
    $("<textarea />", {
        "name" : "content"
    }).appendTo('#edu-form .extra-form');
});

Demo: jsFiddle