Как правильно обработать select

Доброго времени суток. Вопрос такой. Необходимо чтобы в форме было поле где указывается есть ли дети, а если да, то сколько их и их возраст. Реализовал это так:
$(document).ready(function() { var count = 6, i, j, el, child; var container = $('#child-amount'); el = $(document.createElement('select')).attr('class', 'child__amount-item'); container.append(el); for (i = 0; i < count; ++i) { child = $(document.createElement('option')); child.attr('value', i + 1); child.text(i); el.append(child); } el.change(function() { count = parseInt($(this).find(':selected').text()); for (i = 0; i < count; ++i) { el = $(document.createElement('select')).attr('class', 'child__old').attr('id', 'child__old_' + i); container.append(el); for (j = 0; j < 18; ++j) { child = $(document.createElement('option')).attr('id', 'child__old-item' + j); child.attr('value', j); child.text(j); el.append(child); } } }); });

Но понимаю, что это не совсем корректно реализовано, так как если выбрать сначала что детей скажем 2, то добавляется 2 selecta, но если тут же изменить количество детей на 1, то будет 3 selecta, то есть они просто приплюсуют. Кто подскажет как избежать этого? И еще необходимо, чтобы если количество детей больше 0, то к select с классом child__amount-item к классу добавлялась приставка, скажем _have - нужно для стилизации.

Ответ

И не назначайте элементам никакие id, они Вам не нужны.
$(document).ready(function() { var count = 6, i, j, el, child; var container = $('#child-amount'); el = $(document.createElement('select')).attr('class', 'child__amount-item'); container.append(el); for (i = 0; i < count; ++i) { child = $(document.createElement('option')); child.attr('value', i); child.text(i); el.append(child); } el.change(function() { var count = parseInt($(this).val()); if (count > 0) $(this).addClass("child-have"); else $(this).removeClass("child-have"); var $ages = container.find(".child__old"); // 1. delete if we have more than selected for (i = $ages.length - 1; i >= count; i--) { $($ages[i]).remove(); } // 2. create if we have fewer than selected for (i = $ages.length; i < count; ++i) { el = $(document.createElement('select')).attr('class', 'child__old'); container.append(el); for (j = 0; j < 18; ++j) { child = $(document.createElement('option')); child.attr('value', j); child.text(j); el.append(child); } } }); });