Materialize Init is disabling other Select dropdown menus

Question

Im facing an issue where I am using Materialize and am dynamically adding new Select menus to my page. When I initialize the first set of Selects, they work fine. If I add a second set and initialize that same set, the previous one stops working. I have been trying to solve this issue for a few hours and I am not sure where my error is.

The form is where the Select menus will be added. When I add the first set of selects, it works properly. If I add the second set, the first one stops working and I am not sure why.

function addMesocycle() {
    var form = document.querySelector("#mesocycleForm");
    var name = "Mesocycle " + mesocycleIndex;

    var content = 
    `
        <p>${name}</p>
        <label style="color: rgb(46, 46, 46);">Fase:</label>
        <select id="${"fase" + mesocycleIndex}">
            <option value='Option1' selected>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
        <label style="color: rgb(46, 46, 46);">Período:</label>
        <select id="${"period" + mesocycleIndex}">
            <option value='Option1'>Option1</option>
            <option value='Option2'>Option2</option>
            <option value='Option3'>Option3</option>
            <option value='Option4'>Option4</option>
        </select>
        <br>
    `;

    form.innerHTML += content;

    var faseID = "#fase" + mesocycleIndex;
    var periodID = "#period" + mesocycleIndex;

    var ids = [faseID, periodID];

    var elems = document.querySelectorAll(ids);
    M.FormSelect.init(elems);
    
    mesocycleIndex++;
}

<form id="mesocycleForm"></form>

Here is the codepen: https://codepen.io/JoaoBM/pen/MWJdLEB

Im not sure what is causing the previous Selects to be disabled. If you could help me, Id be very grateful. Thanks in advance.

Answer 1

I found the solution for anyone curious in the future.

I posted this issue on Materialize's Github Issues and was told to

"avoid using innerHTML, because the internal state of the select elements will be lost. Instead of using innerHTML, you can use insertAdjacentHTML. For example :

form.insertAdjacentHTML('beforeend', content);

IMO, this is not the bug from materializecss."

You can find the Github Issue here: https://github.com/materializecss/materialize/issues/124

Here is the final block of code, using pieces of @ΑΓΡΙΑ ΠΕΣΤΡΟΦΑ's answer (so it can be more tidy):

var mesocycleIndex = 1;

function addMesocycle() {
  var form = document.querySelector("#mesocycleForm");
  var name = "Mesocycle " + mesocycleIndex;

  var content =
    `
      <p>${name}</p>
      
      <label style="color: rgb(46, 46, 46);">Fase:</label>
      <select id="fase${mesocycleIndex}" class="fase">
        <option value='Option1'>Option1</option>
        <option value='Option2'>Option2</option>
        <option value='Option3'>Option3</option>
        <option value='Option4'>Option4</option>
      </select>

      <br>

      <label style="color: rgb(46, 46, 46);">Período:</label>
      <select id="period${mesocycleIndex}" class="period">
        <option value='Option1'>Option1</option>
        <option value='Option2'>Option2</option>
        <option value='Option3'>Option3</option>
        <option value='Option4'>Option4</option>
      </select>

      <br>
    `;

  form.insertAdjacentHTML('beforeend', content);

  var ids = ['.fase', '.period'];

  var elems = document.querySelectorAll(ids);

  M.FormSelect.init(elems);

  mesocycleIndex++;
}

Which you can see working here: https://codepen.io/JoaoBM/pen/RwpbXRZ

Hope this helps someone in the future with the same problem as me.