How to limit Javascript from duplicate form fields?
<p>i found nice javascript here <a href="http://stackoverflow.com/questions/1462119/how-do-you-use-javascript-to-duplicate-form-fields">javascript duplicate field</a></p>

<p>but the problem is i want limit function can duplicate only until 10 rows.</p>

<p>here my code. </p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;script type="text/javascript"&gt;

    (function($){
          $countForms = 1;
          $.fn.addForms = function(){
                        var myform = "&lt;table&gt;"+
                         "  &lt;tr&gt;"+
                         "     &lt;td&gt;Field A ("+$countForms+"):&lt;/td&gt;"+
                         "     &lt;td&gt;&lt;input type='text' name='fielda["+$countForms+"]'&gt;&lt;/td&gt;"+
                         "     &lt;td&gt;Field B ("+$countForms+"):&lt;/td&gt;"+
                         "     &lt;td&gt;&lt;textarea name='fieldb["+$countForms+"]'&gt;&lt;/textarea&gt;&lt;/td&gt;"+
                         "     &lt;td&gt;&lt;button&gt;remove&lt;/button&gt;&lt;/td&gt;"+
                         "  &lt;/tr&gt;"+
                         "&lt;/table&gt;";

                         myform = $("&lt;div&gt;"+myform+"&lt;/div&gt;");
                         $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });

                         $(this).append(myform);
                         $countForms++;
          };
    })(jQuery);         

    $(function(){
        $("#mybutton").bind("click", function(){
                $("#container").addForms();
        });
    });

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button id="mybutton"&gt;add form&lt;/button&gt;
&lt;div id="container"&gt;&lt;/div&gt;
</code></pre>

<p>so any suggestion would be much appreciated!</p>

<p>Thanks.</p>
