JSFiddle - React, Tailwind, and code Playground
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>
<div id="container"></div>
JavaScript
document.getElementById('select_seasons').addEventListener('change', function(){
var container = document.getElementById('container');
container.innerHTML = ''; //clear
//Find selected option
var n = 1;
for(var i = 0; i < this.options.length; ++i){
if(this.options[i].selected){
n = ~~this.options[i].value; //Cast to int
break;
}
}
for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
var newDiv = document.createElement('div');
newDiv.id = 'element-' + i;
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";
container.appendChild(newDiv);
}
});
//Emit event on page init
document.getElementById('select_seasons').dispatchEvent(new Event('change'));