How to refresh/update select in Javascript (vanilla) with Materialize?

I am attempting to update options in a select-widget by using Javascript (vanilla) with Materialize. I have I guess it is related to "dynamically generated select elements", but I am not sure what to do?

According to Materialize I may need to consider to implement: "In addition, you will need a separate call for any dynamically generated select elements your page generates.". Unfortunately, I am not sure (did not found) how I can "dynamically generated select elements" as to update/refresh the select-widget?

Here are my related codes:

HTML

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class = "container">
    <div class="row">
      <div class="input-field col s3">
        <button id = "btn" class="waves-effect waves-light btn-small"><i class="material-icons left">person_add</i>Add</button>
      </div>
      <div class="row">
      <div class="input-field col s3">
        <button id = "btnRemove" class="waves-effect waves-light btn-small"><i class="material-icons left">delete</i>Remove</button>
      </div>
    </div> <!-- CLOSE ROW -->

    <div class="row">
      <div>
        <div style = "position:relative; top:-10px;" class="input-field col s6">
          <select id="voteNoList" onchange="PersonInfo()" required>
            <option value="">Vote Number?</option>
            <!-- <?!= currListNo; ?>
               -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </div>
      </div>
    </div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->

Javascript (Vanilla)

  //------------
  // AUTO
  //------------
  // Select
  document.addEventListener('DOMContentLoaded', function() {
    var el = document.querySelectorAll('select');
    var instances = M.FormSelect.init(el);
  });

  // Button - Add
  document.getElementById("btn").addEventListener("click", PersonInfo);

  // Button - Remove
  document.getElementById("btnRemove").addEventListener("click", PersonDelete);

  function PersonInfo(){

    debugger;
    var selectobject = document.createElement("option");
    selectobject.text = "Text55";
    selectobject.value = "myvalue55";
    var selectList = document.getElementById("voteNoList");
    selectList.appendChild(selectobject);  
    debugger;
    return;        
  }

  function PersonDelete(){

    debugger;
    var selectobject=document.getElementById("voteNoList");
    for (var i=0; i<selectobject.length; i++){
      if (selectobject.options[i].value == "2"){
         selectobject.remove(i);
        break;
      }
    } 
    debugger;
    return;     
  }

My expectation was to have a select-widget which can increase and decrease in options depending on how the buttons have been pressed. (Observe that for simplicity, I hard-coded to only be able to add the same option and delete the option that is equal to "2".)

Although I could not find a solution in Javascript (vanilla), I was able to find a jQuery solution as seen in link.

My codes are also available in CodePen, where one can see in debug mode that the different number options of selectList change when pressing the buttons.

Apparently, the solution to my case was to add M.FormSelect.init(selectList); before return. The codes with the update/solution are available in CodePen.