Question: this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form. 

For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created. 

My select HTML currently looks like this; 

```
<select id="select_seasons">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select>

```

I have created a script which will create a div on button click but this isn't my aim; 

```
var number = 2; 
document.getElementById('add').addEventListener('click', function( 
    ) { 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'container'; 
    newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
    document.getElementById('contain_form').appendChild(newDiv);
    number++; 
}); 

```

I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post! 

Feel free to comment and ask for me details if required. 

Thanks in advance, 
Sam

Answer: 
You need to bind the `change` event on your `select` element. Something like this:

```js
var divs = [];

document.getElementById('select_seasons').addEventListener('change', function(e) {
  var n = +this.value;
  for (var i = 0; i < divs.length; i++) {
    divs[i].remove();
  }
  divs = [];
  for (var i = 0; i < n; i++) {
    var d = document.createElement("div");
    d.className = "new";
    document.body.appendChild(d);
    divs.push(d);
  }
});
```

```css
.new {
  background-color: red;
  width: 100px;
  height: 20px;
  margin: 1px;
}
```

```html
<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
```
I will help you to read [this](https://stackoverflow.com/questions/14094697/javascript-how-to-create-new-div-dynamically-change-it-move-it-modify-it-in) now, I don't need another loop to remove the old divs in the container, you can use `innedHTML` and set it to empty.

```
<select id="select_seasons">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

```

```
document.getElementById('select_seasons').addEventListener('change', function() { 
    var self = this,
    exisiting = document.getElementById('contain_form');

   //remove existing divs
    exisiting.innerHTML = '';

  for(i=1; i<= self.value; i++) {
     var newDiv = document.createElement('div'); 
     newDiv.id = 'container'; 
     newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
  exisiting.appendChild(newDiv);
   }
}); 

```

Check this [fiddle](http://jsfiddle.net/a1vuabx5/)