Getting error while creating InputTextArea on button click using jQuery in jsf

Getting error while creating InputTextArea on button click using jQuery in jsf

Hi All,
I want to create InputTextArea dynamically on button click. While doing so, getting the following error.
Code:
<h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>TxtArea Dynamic</title>
            </f:facet>
            <h:outputScript library="primefaces" name="jquery/jquery.js"/>
            <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

             <script type="text/javascript">
                jQuery(document).ready(function () {
                    var counter = 2;                   
                    jQuery("#addButton").click(function () {
                        if (counter > 10) {
                            alert("Only 10 textboxes allow");
                            return false;
                        }

                        var newTextBoxDiv = jQuery(document.createElement('div'))
                                .attr("id", 'TextBoxDiv' + counter);

                        newTextBoxDiv.after().html("<h:inputTextarea cols='30' rows='2' id='textbox" + counter + "'/>");

                        newTextBoxDiv.appendTo("#TextBoxesGroup");
                        counter++;
                    });
</script>
</h:head>

<h:body>
            <div id='TextBoxesGroup'>
                <div id="TextBoxDiv1">
                    <!--<h:outputLabel style="font-weight: bolder; font-size: 90%; width: 90%" value="Textbox #1 : "></h:outputLabel>-->
                    <h:inputTextarea cols="30" rows="2" id="textbox1"/>
                </div>
            </div>
</h:body>

Error:
An Error Occurred:--> textbox" + counter + "