jQuery clone() method within jQuery TABS shows clone fields on other tabs
<p>I have jQuery tabs with below code:</p>

<pre><code>&lt;ul class="tabNavigation" id="tabs"&gt;    
    &lt;li&gt;&lt;a href="#AAA"&gt;AA&lt;/a&gt;&lt;/li&gt;    
    &lt;li&gt;&lt;a href="#BBB"&gt;BBB&lt;/a&gt;&lt;/li&gt;    
&lt;/ul&gt;  

&lt;div id="AAA"&gt;    
    &lt;cfinclude template="AAA.cfm"&gt;
&lt;/div&gt;  

&lt;div id="BBB"&gt;    
               &lt;cfinclude template="BBB.cfm"&gt;
&lt;/div&gt;  
</code></pre>

<p>Now, on BBB.cfm file, I am cloning a row of the table along with the form fields within the row using following code:</p>

<pre><code>$(document).ready(
  function() {
    $('input#BtnAddSystem').click(
      function($e) {
        $e.preventDefault();
        $('tr#UCrow_1').clone(true).removeAttr('id').appendTo('tbody');
      }
    );

  }
);
</code></pre>

<p>which works well. The problem is the cloned form fields are also shown up on the "AAA" tabs. so it endup in displaying the cloned form fields on both the tabs.</p>

<p>Can anyone please help me to get it resolved? Any help on this will be much appriciated!</p>

<p>Thanks in advance!</p>
