Add/Remove Input Fields Dynamically with jQuery

[Vishal_19]

First Input is No. of Kids. How to create Age Group field for each kid.
e.g. If 1 is selected create 1 age group field. If 2 is selected create 2 Age group fields. And so on.

First Input

<select name=""> <option  selected>No. of Kids</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select>

Second Input

<select name=""> <option  selected>Select Age Group</option> <option value="">1-5</option> <option value="">5-10</option> <option value="">10-15</option> </select>

[diafol]

Do you expect us to code all this for you? Where's your effort?

[Vishal_19]

My code is continuously adding input field for age group, whenever there is change in input field 1 i.e. "#select". But I want to add only 4 fields.

How to Add Only one agegroup field for each number of child

<select name="" id="select">
    <option  selected>No. of Kids</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

script

$(document).ready(function() {
    "use strict";

    $('select').on('change', function() {
        // alert( this.value );

        var max_limit = 4;
        var wrapper = $('body'); //var $body = $('body');
        var x = 1;

        if (x < max_limit) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<select name="" id="agegroup"><option selected>Select Age Group</option><option value="">1-5</option><option value="">5-10</option><option value="">10-15</option> </select>'); //add input select
        }
    });

});

[diafol]

<select name="" id="select">
    <option  selected>No. of Kids</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
<div id="ages"></div>

$(document).ready(function() {
    "use strict";
    $('#select').change( function() {
        var num = parseInt($(this).val());
        var max_limit = 4;
        var slct = '<select name="agegroup[]"><option selected>Select Age Group</option><option value="1">1-5</option><option value="2">5-10</option><option value="3">10-15</option> </select>';

        if(num <= max_limit) $('#ages').html(slct.repeat(num));
    });
});    

Something like that. Not tested.