[broadcast77]

Добрый день! Есть следующая проблема. Вот маленькая html-форма

<form action="" id="demoForm" method="post">
            <div id='TextBoxesGroup'>    
                <div id="TextBoxDiv1">
                    <div id="message">mes</div>
                        <input type="text" id="textbox">
                </div>    
            </div>    
        </form>
        <input type='button' value='Add Button' id='addButton'>
        <input type='button' value='Get TextBox Value' id='getButtonValue'>

Вот код jQuery & AJAX. Первая функция отвечает за то, чтобы при нажатии на кнопку addButton - добавлялся новый элемент в форме ввода, а вторая функция - должна брать значение введённое в окошко textbox, отправлять его на сервер (post.php) и возвращать в div id=message.

$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);

                newTextBoxDiv.after().html('<div id="message'+counter+'">mes'+counter+'</div><input type=text id="textbox'+counter+'">');

	newTextBoxDiv.appendTo("#TextBoxesGroup");
 
	counter++;
        
     });	
     
     $('#getButtonValue').click(function() {
		$.ajax({
			type : 'POST',
			url : 'post.php',
			dataType : 'json',
			data: {email : $('#textbox').val()},
			success : function(data){
				$('#message').text(data.msg).show();
				$('#demoForm').show();
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
			}
		});
		return false;
	});
 });

Проблема в том, что функция добавления элементов форм работает, а функция отправки и получения данных - работает только для первого элемента. Как сделать так, чтобы вторая функция динамически подцепляла новые html-элементы?

Спасибо!