New Select Not Initialized

by AJLeonardi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css">

<form>
  <div class="formset-wrapper">
    <div class="row form">
      <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">Name</label>
      </div>
      <div class="input-field col l6 m6 s6">
          <select class=''>
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
          <label>Materialize Select</label>
      </div>
    </div>
    <div class="row" id="add-button-wrapper">
      <a class="btn-floating blue right" id="add-division">
        <i class="material-icons tooltipped action-tooltip" data-position="left" data-tooltip="Add Another Division">group_add</i>
      </a>
     </div>
  </div>
</form>


<script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script>

JavaScript

var dd_options = '';

let all_select_instances = [];

function initializeSelects(){
    let select_elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(select_elems, dd_options);
    all_select_instances = instances;
}

function destroySelects(){
		all_select_instances.forEach(function(item){
    	item.destroy();
    });
    all_select_instances = [];
}
document.addEventListener('DOMContentLoaded', initializeSelects);

let addButton = document.querySelector("#add-division");
let seasonForm = document.querySelectorAll(".form");
let addButtonWrapper = document.querySelector('#add-button-wrapper');
let container = document.querySelector(".formset-wrapper");

addButton.addEventListener('click', addSeason);
  
    function addSeason(e){
      e.preventDefault();
      destroySelects();
      let newForm = seasonForm[0].cloneNode(true);

      container.insertBefore(newForm, addButtonWrapper);
      
      initializeSelects();

  }