<div class="card p-4 mt-3 my-2">

<div class="card-body">

  <h5 class="card-title mb-3">SELECT UPDATE</h5>

  <form enctype="multipart/form-data" method="post" action="/Dev/Test">

  <div class="form-row">    

   <div class="col-4">

      <label class="mb-0">Options</label>

      <select id="upd-select" class="mdb-select">

        <option value="1">Option 1</option>

      </select>

    </div>  

  </div>

  <div class="d-flex justify-content-start">

    <button id="add-btn" type="button" class="btn btn-sm btn-primary waves-effect waves-light m-0">Add options</button>    

  </div>

  <br>  

  <small class="text-muted">Press the button more than 3 times and inspect the select wrapper to see the error, anyway you browser are going to crash</small>

  </form>

</div>

</div>

​

$(document).ready(function(){

  $(".mdb-select").materialSelect();  

});

​

$("#add-btn").click(function(){

  $(".mdb-select").materialSelect({destroy: true});

  let length = $("#upd-select option").length + 1;

  $("#upd-select").append(new Option("Option " + length, length));

  length++;

  $("#upd-select").append(new Option("Option " + length, length));

  length++;

  $("#upd-select").append(new Option("Option " + length, length));

  //I know append 1 option per time is not the best way to add options, but this isn't the problem here

  //let options = [];

  //for (var i = 0; i <= 3; i++) {

  //  options.push(new Option("Option " + length, length));

  //  length++;

  //}

  //$("#upd-select").append(options);

});