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>
Member Avatar
diafol

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

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
        }
    });

});
Member Avatar
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.