New function for the appended item?

New function for the appended item?

Hi,

I have a textbox with add button, says A. If i click A, a new textbox will be appended.
The appended textbox, B will have an ADD button, in order to add new textbox again.

The problem I face is I am not sure where or how to include the jquery function of ADD button for Textbox B.
Can i have your advice? Thank you!

My script:
  1.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>              
        <script type="text/javascript">
       
            $(document).ready(function() {
           

                var text = $("#textbox").val();
                if ( text != "")
                {
                    $("#addButton").show();
                }           

                var counter = 1;
               

                // when add button has been clicked
                   $("#addButton").click(function () {
           
                       if(counter>10){
                         alert("Only 10 textboxes allow");
                         return false;
                       }  

                       var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
                    var html = addItem(counter);
                    newTextBoxDiv.html(''+html);
                       newTextBoxDiv.appendTo("#divTest");
                                         
                 });  
                
                // when remove button has been clicked
                  $("#removeButton").click(function () {
                        if(counter==1){
                          alert("No more textbox to remove");
                          return false;
                      }
               
                        counter--;
               
                      $("#divTest" + counter).remove();
               
                  });
                                                                                   
            });
           
            function addItem(counter)
            {            
                var html = ""              
                        + "<div style=\"float:left\">"
                        + "<input type=textbox name=\"textbox"+counter+"\" value=\"textbox"+counter+"\" id=\"textbox"+counter+"\">"                 
                        + "<br>"
                        + "<input type=button value=\"ADD\" id='addButton"+counter+"'>" // how should i handle this addButton in order to ADD new textbox again?
                        + "<input type=button value=\"REMOVE\" id='removeButton"+counter+"'>"
                        + "</div>";                   
                return html;
            }
        </script>
    </head>
    <body>
        <div id="divTest" style="float:left;">
            <div style="float:left">
                <input type=textbox id="textbox">
                <input type=button value="REMOVE" id='removeButton'>
                <input type=button value="ADD" id='addButton'>
            </div>
        </div>
    </body>
    </html>