How to dynamically create select options when using materialize css

I am reposing my question as I was able to solve some part of it and only need help on certain point.

I am able to populate rest of the table content dynamically except the <select> elements.

Because I am using Materialize css I am getting trouble creating it.

document.addEventListener('DOMContentLoaded', function(){


google.script.run.withSuccessHandler(getLeaveRosterData).loadRoster();
 var elems = document.querySelectorAll('select');
 var instances = M.FormSelect.init(elems);

});

let weeksArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

dataArray.forEach(function(ele) 
{
  const tableRow = document.createElement("tr");

  var agentTD = document.createElement("td");
  agentTD.setAttribute("id", "agent"+ ele);
  var t = document.createTextNode(ele);
  agentTD.appendChild(t);

  var w1TD = document.createElement("td");
  w1TD.appendChild(createDropdown("w1-" + ele));

   // create td elements with unique ids
  var w2TD = document.createElement("td");
  w2TD.appendChild(createDropdown("w2-" + ele));

  tableRow.appendChild(agentTD);
  tableRow.appendChild(w1TD);
  tableRow.appendChild(w2TD);
  tbody.appendChild(tableRow);

});
function createDropdown(id) {
  //create a radio button
  var fragment = document.createDocumentFragment();
  var select = document.createElement('select');
  select.setAttribute("id", id);
  weeksArray.forEach(function (day) {
    select.options.add( new Option(day, day));
  });
  fragment.appendChild(select);
  return fragment;
}

My select elements are day names.["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]. Any suggestion is welcomed.

Solution

A note on Materialize CSS neding "initalization": https://materializecss.com/select.html

Initialization

You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

You can either use the above code to do them all in bulk, or target each added select more individually.

The code you posted is missing some references to make it testable, but I've added those, but essentially does what you're looking for as-is. You can run this in-browser here to confirm the select lists are rendered.

let weeksArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

const dataArray = ['example 1', 'example 2'];
const tbody = document.querySelector('tbody');

dataArray.forEach(function(ele) 
{
  const tableRow = document.createElement("tr");

  var agentTD = document.createElement("td");
  agentTD.setAttribute("id", "agent"+ ele);
  var t = document.createTextNode(ele);
  agentTD.appendChild(t);

  var w1TD = document.createElement("td");
  w1TD.appendChild(createDropdown("w1-" + ele));

   // create td elements with unique ids
  var w2TD = document.createElement("td");
  w2TD.appendChild(createDropdown("w2-" + ele));

  tableRow.appendChild(agentTD);
  tableRow.appendChild(w1TD);
  tableRow.appendChild(w2TD);
  tbody.appendChild(tableRow);

});
function createDropdown(id) {
  //create a radio button
  var fragment = document.createDocumentFragment();
  var select = document.createElement('select');
  select.setAttribute("id", id);
  weeksArray.forEach(function (day) {
    select.options.add( new Option(day, day));
  });
  fragment.appendChild(select);
  return fragment;
}

<table>
  <tbody>
  </tbody>
</table>