Create new divs and select boxes with Javascript

Question

I am trying create some divs with select boxes.

The code is working if you change number of children (see example below - the last one with 0 as selected), and is creating new div with select boxes depends on value of select box.

But if number of rooms is greater than 1 then it stops working. And I got no error from js on dev tools.

Also you can see I have some code as commented to use it for each room on the children select options.

1. What am I doing wrong and the select box is not working when the rooms are more than 1?

2. Is there a better way to make it work with a for loop instead of going as Kids Age 1 Room - Kids Age 2 Room - Kids Age 3 Room ?

Please any feedback would be helpful.

Also excuse my language for any mistakes :D

document.getElementById('search_rooms_select').addEventListener('change', function(){ 
    var container = document.getElementById('container');    
    container.innerHTML = '';
    var n = 1;
    for(var i = 0; i < this.options.length; ++i){
        if(this.options[i].selected){
            n = ~~this.options[i].value;
            break;
        }
    }    
    for(var i = 1; i <= n; ++i){ 
        var newDiv = document.createElement('div'); 
        newDiv.id = 'element-' + i; 
        newDiv.innerHTML = "<div class='col-xs-12 col-md-12' id='room-"+i+"'><div class='col-xs-4 col-md-4'><label>Room "+i+":</label></div><div class='col-xs-8 col-md-8 paddinglr'><div class='col-xs-6 col-sm-6 col-md-6'><select name='adultsTotalRoom"+i+"' class='form-control' id='adults-"+i+"'><option value='1'>1</option><option value='2' selected>2</option><option value='3'>3</option><option value='4'>4</option></select></div><div class='col-xs-6 col-sm-6 col-md-6'><select name='childrenTotalRoom1' class='form-control' id='children-"+i+"'><option value='0' selected>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option></select></div></div><div id='kidssection"+i+"'></div></div>";

        container.appendChild(newDiv);
    }
}); 
document.getElementById('search_rooms_select').dispatchEvent(new Event('change'));

//Kids Age 1 Room
document.getElementById('children-1').addEventListener('change', function(){ 
    var ks1 = document.getElementById('kidssection1');    
    ks1.innerHTML = ''; 
    var m = 1;
    for(var i = 0; i < this.options.length; ++i){
        if(this.options[i].selected){
            m = ~~this.options[i].value;
            break;
        }
    }    
    for(var i = 1; i <= m; ++i){ 
        var newDiv = document.createElement('div'); 
        newDiv.id = 'elementm-' + i; 
        newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
        ks1.appendChild(newDiv);
    }
}); 
document.getElementById('children-1').dispatchEvent(new Event('change'));


//////Kids Age 2 Room
//document.getElementById('children-2').addEventListener('change', function(){ 
//    var ks2 = document.getElementById('kidssection2');    
//    ks2.innerHTML = ''; 
//    var m1 = 1;
//    for(var i = 0; i < this.options.length; ++i){
//        if(this.options[i].selected){
//            m1 = ~~this.options[i].value;
//            break;
//        }
//    }    
//    for(var i = 1; i <= m1; ++i){ 
//        var newDiva = document.createElement('div'); 
//        newDiva.id = 'elementm1-' + i; 
//        newDiva.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><select name='children1age"+i+"' class='form-control' id='children2age"+i+"'><option value='0'>0</option></select></div>";
//        ks2.appendChild(newDiva);
//    }
//}); 
//document.getElementById('children-2').dispatchEvent(new Event('change'));
//
//
////Kids Age 3 Room
//document.getElementById('children-3').addEventListener('change', function(){ 
//    var container = document.getElementById('kids-section-3');    
//    container.innerHTML = ''; 
//    var n = 1;
//    for(var i = 0; i < this.options.length; ++i){
//        if(this.options[i].selected){
//            n = ~~this.options[i].value;
//            break;
//        }
//    }    
//    for(var i = 1; i <= n; ++i){ 
//        var newDiv = document.createElement('div'); 
//        newDiv.id = 'element-' + i; 
//        newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value=''>0</option></select></div>";
//        container.appendChild(newDiv);
//    }
//}); 
//document.getElementById('children-3').dispatchEvent(new Event('change'));

<div class="container">
    <div class="col-xs-12">
        <div class="col-xs-3">
            <label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
        </div>                            
        <div class="col-xs-9">
            <select name="total_rooms_search" class="form-control" id="search_rooms_select">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
    </div>
    <div class="col-xs-12 col-md-12 paddinglr labelform">
        <div class="col-xs-4 col-md-4 col-sm-4 paddingright">
            <label class="labelselect"></label>
        </div>
        <div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
            <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
                <label>Adults</label>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
                <label>Children</label>
            </div>
        </div>
    </div>

    <div id="container">    </div>


<br/><br/><br/><br/><br/><br/>

Answer 1

This should work for you.

function children1(e){

var ks1 = document.getElementById('kidssection1');    
ks1.innerHTML = ''; 
var m = 1;
m = ~~e;
for(var i = 1; i <= m; ++i){ 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'elementm-' + i; 
    newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
    ks1.appendChild(newDiv);
  }
}

What I did, was just remove the event listener and add onchange function on the select box.

Also change the last option of children select and add onchange function like this:

<select name='childrenTotalRoom1' class='form-control' onchange='children"+i+"(this.value)'>

So you just have to create 3 different functions or slightly change your code and do it with just one. It's up to you !

So replace this part of code with the function above:

//Kids Age 1 Room
document.getElementById('children-1').addEventListener('change', function(){ 
var ks1 = document.getElementById('kidssection1');    
ks1.innerHTML = ''; 
var m = 1;
for(var i = 0; i < this.options.length; ++i){
    if(this.options[i].selected){
        m = ~~this.options[i].value;
        break;
    }
}    
for(var i = 1; i <= m; ++i){ 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'elementm-' + i; 
    newDiv.innerHTML = "<div class='col-xs-6 col-sm-6 col-md-3'><small>Child "+i+" Age</small><select name='children1age"+i+"' class='form-control' id='children1age"+i+"'><option value='0'>0</option></select></div>";
    ks1.appendChild(newDiv);
}
}); 
document.getElementById('children-1').dispatchEvent(new Event('change'));