[broadcast77]

Вообщем, вот такая вот задачка. Есть на сайте поле с select'ом.

<div id="ServiceBlockGroup"> 
                                <div id="CountryServiceOptionsBlock1">
                                    <select name='dynfields[]' class="uk-margin-small-top" id='select_country_id_1' onchange="ajax_update_service(this.value);"><option value=''>страна не выбрана</option></select>
                                    <select name='dynfields[]' class="uk-margin-small-top" id='select_service_id_1'><option value=''>услуга не назначена</option></select><p>
                                </div>
                            </div>

Далее есть набор опций, чтобы можно было добавлять дополнительные селекты, если нужно (Как товар в интернет магазине, например)

<input type="button" id="add_field" value="Добавить услугу">
    <input type="button" id="rem_field" value="Удалить услугу">

Вот код с помощью которого, можно добавлять дополнительные элементы.

var counter = 1;
 
    $("#add_field").click(function () {
 
	if(counter>10){
            alert("Достигнут лимит добавления полей!");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'CountryServiceOptionsBlock' + counter);

                newTextBoxDiv.after().html('<select name="dynfields[]' + '" class="uk-margin-small-top" id="select_country_id_' + counter + '" onchange="ajax_update_service(this.value);""><option value="">страна не выбрана</option></select> <select name="dynfields[]' + '" class="uk-margin-small-top" id="select_service_id_' + counter + '""><option value="">услуга не назначена</option></select><p>');
                                                                                                                                  
	newTextBoxDiv.appendTo("#ServiceBlockGroup");
 
	counter++;
        
     });	
    
    $("#rem_field").click(function () {
	if(counter==1){
          alert("Достигнут лимит удаления полей!");
          return false;
       }   
 
	counter--;
 
        $("#CountryServiceOptionsBlock" + counter).remove();
 
     });

Вот код, с помощью которого наполняется select. (В этот select при помощи ajax запроса и php-обработчика подгружаются данные из базы);

function getCountryValue(counter) {
    var country_id = 'select_country_id_';
    return country_id.concat(this.counter.toString()); 
}

function ajax_update_country()  {
    var oXmlHttp = createXMLHttp();
    oXmlHttp.open("post", "../ajax_scripts/countryListUpdate.php", true);
    oXmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    oXmlHttp.send(null);
    oXmlHttp.onreadystatechange = function()  {
        if(oXmlHttp.readyState == 4) 
        {
            if(oXmlHttp.status == 200) 
            {
                a = oXmlHttp.responseText;
                document.getElementById(getCountryValue()).innerHTML = a;
            } 
                else {displayCustomerInfo("Ошибка: " + oXmlHttp.statusText);}
        }
    };
}

Ну и собственно вот php обработчик, подгружающий данные в select, но я думаю он тут не нужен. Просто для наглядности.

<?php
include('mysql.php');

$sql_get_countries = mysql_query("SELECT * FROM system_countries");

while($row_country = mysql_fetch_array($sql_get_countries)) {
        echo "<option value='".$row_country['country_id']."'>".$row_country['country_name']."</option>";
    }
?>

Вопрос заключается в следующем, данный код полностью работоспособен, но ТОЛЬКО для первого селекта. Стоит добавить ещё элементов, и они уже не работают. Хотя в ajax функцию передаются id разными значениями counter.

Как заставить ajax срабатывать при добавлении n-элементов?

Заранее благодарен за помощь.

p.s.

Задавайте любые вопросы, если задача не ясна.