Error: Failed to execute 'appendChild' on 'Node': Only one element on document allowed

Question

I have nav tabs like this

  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-click="selectTab(1)">
      <a href="javascript:void(0);" ng-class="{active:isActive(1)}">Tab1</a>
    </li>
    <li role="presentation" ng-click="selectTab(1)">
      <a href="javascript:void(0);" ng-class="{active:isActive(1)}">Tab2</a>
    </li>
</ul>

Now I am trying to append data to textarea field which is in the second div as hidden

then I am getting this error:

Error: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

What exactly it means

<div ng-show="isActive(1)"> //true
<form class="formStep1" name="formStep1">
<input type="number" ng-model="salary" id="salary" name="salary" >
</form>
</div>

<div ng-show="isActive(2)"> //false
<form name="formStep2" class="formStep2">
<textarea name="job_description" ng-model="job_description" id="job_description" ></textarea>
</form>
</div>

Note: When I put text area in the first div form it is working fine

but I want this field in next tab second form.

this is how I am appending date actually its summer note editor. how can I debug this issue..?

var jobDescription = finTempObj.job_description; //data
$('#job_description').summernote('reset');
$('#job_description').summernote('editor.pasteHTML', jobDescription);

Answer 1

This one fixed my issue:

var jobDescription = finTempObj.job_description;
$('#job_description').summernote('reset');
$("#job_description").summernote("code", jobDescription);