Why more than one select input doesn't work? - Selectize

Question

I'm working on a page where the user has to choose options that will be in dropdowns (select tag). I'm using selectize to add features on that select tag's, but when the user uses the button to add more select inputs, the first one stops working, but the second one works perfectly. You can see in:

var numberofSelects = 0;
var maxSelects = 9; // 10 Inputs

function addInput() {
  if (numberofSelects < maxSelects) {
    numberofSelects++;
    var newSelect =
      'Input ' + numberofSelects + ' - <select id="model-select' + numberofSelects + '" value="Selecione">' +
      '<optgroup label="Fluorescente">' +
      '<option value="0">Fluorescente 20w</option>' +
      '<option value="1">Fluorescente 40w</option>' +
      '<option value="2">Fluorescente HO 40w</option>' +
      '</optgroup>' +
      '<option value="3">Metalica 400w</option>' +
      '</select><br>';
    document.getElementById("main").innerHTML += newSelect
    $('#model-select' + numberofSelects).selectize(); // Selectize the new select input
  } else {
    window.alert("Limit reached")
  }
}

$('#model-select0').selectize();

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet"/>
<div id="main">
  <button onclick="addInput();">Add Input</button>
  <br> Input 0 -
  <select id="model-select0" value="Selecione">
    <optgroup label="Fluorescente">
      <option value="0">Fluorescente 20w</option>
      <option value="1">Fluorescente 40w</option>
      <option value="2">Fluorescente HO 40w</option>
    </optgroup>
    <option value="3">Metalica 400w</option>
  </select>
  <br>
</div>

Only the last "select" works. I don't understand why. I have had this problem for days. I will be grateful for the help.

Sorry for the English.

Answer 1

The issue is document.getElementById("main").innerHTML += newSelect. On the MDN page it says:

Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.

So in first removing all of the child elements and then re-adding them, the elements are new elements and lose all of the JavaScript event handlers.

A simple change, to using jQuery's .append(), fixes your problem.

var numberofSelects = 0;
var maxSelects = 9; // 10 Inputs

function addInput() {
  if (numberofSelects < maxSelects) {
    numberofSelects++;
    var newSelect =
      'Input ' + numberofSelects + ' - <select id="model-select' + numberofSelects + '" value="Selecione">' +
      '<optgroup label="Fluorescente">' +
      '<option value="0">Fluorescente 20w</option>' +
      '<option value="1">Fluorescente 40w</option>' +
      '<option value="2">Fluorescente HO 40w</option>' +
      '</optgroup>' +
      '<option value="3">Metalica 400w</option>' +
      '</select><br>';
    
    $('#main').append(newSelect);
    
    $('#model-select' + numberofSelects).selectize(); // Selectize the new select input
  } else {
    window.alert("Limit reached")
  }
}

$('#model-select0').selectize();

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet"/>
<div id="main">
  <button onclick="addInput();">Add Input</button>
  <br> Input 0 -
  <select id="model-select0" value="Selecione">
    <optgroup label="Fluorescente">
      <option value="0">Fluorescente 20w</option>
      <option value="1">Fluorescente 40w</option>
      <option value="2">Fluorescente HO 40w</option>
    </optgroup>
    <option value="3">Metalica 400w</option>
  </select>
  <br>
</div>

Answer 2

Change your code that selectize your select element:

$('#model-select0').selectize();

to this:

$('select[id*="model-select"]').selectize();

As $('#model-select0') only selects your single select element whereas you want to selectize all your select tags.

Another solution(but it will selectize all the select elements on your webpage)

$('select').selectize();