Dynamically load selection element with jquery/javascript showing blank

Question

Full Code Pen: https://codepen.io/anon/pen/QPyPMZ

This is not a duplicate as that solution does not solve my problem. It works in the below snippet but not my html if you check my codepen.

I am creating a test "candidate failed ui" for users to manually select the reasons why a candidate failed. The table will be populated from an ajax request into a object that will then populate the table using insert rows. Now for each row there needs to be a selection dropdown in the next cell. Whenever I try to do this it either shows the raw code instead of the element or nothing at all.

const dummy = [
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna'],
  ['33333-1', 'Paul, Jake', 'Mitchell, Nuna'],
  ['81692-1', 'Smith, Ted', 'Mitchell, Nuna'],
  ['82654-1', 'Rele, Don', 'Mitchell, Nuna'],
  ['32984-1', 'Titan, Angela', 'Mitchell, Nuna']
];

$(document).ready(function() {
  var tableRef = document
    .getElementById('data')
    .getElementsByTagName('tbody')[0];

  $('#sub').click(function() {
    //alert($('#pcowner :selected').text());
    $('#dataRows').empty();
    dummy.forEach(row => {
      try {
        let newRow = tableRef.insertRow(
          tableRef.rows.length
        );
        let newC0 = newRow.insertCell(0);
        let newC1 = newRow.insertCell(1);
        let newC2 = newRow.insertCell(2);
        let newC3 = newRow.insertCell(3);
        let newT0 = document.createTextNode(row[0]);
        let newT1 = document.createTextNode(row[1]);
        let newT2 = document.createTextNode(row[2]);
        let newT3 = document.createElement('div');
        let html =
          '<select><option value="">Pick me</option></select>';
        newT3.innerHTML = html;
        newC0.appendChild(newT0);
        newC1.appendChild(newT1);
        newC2.appendChild(newT2);
        newC3.append(newT3);
      } catch (e) {
        console.log(e);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button class="btn waves-effect waves-light" id="sub" name="action" style="margin-top:17px;float:left;" type="submit">Refresh
  </button>
<div class="customContainer">
  <table class="highlight responsive-table" id="data">
    <thead>
      <tr>
        <th class="headers">Request ID</th>
        <th class="headers">Candidate Name</th>
        <th class="headers">Engagment Manager</th>
        <th class="headers">Fail Classification</th>
        <th class="headers">Reason</th>
        <th class="headers">Comments</th>
        <th class="headers">PC Action Required</th>
        <th class="headers">PM Action Required</th>
      </tr>
    </thead>
    <tbody id="dataRows"></tbody>
  </table>
</div>

For additional challenge, both fail classification and reasons are dropdowns with relations to each other.

const failClassifications = [1, 2, 3]
const failReasons = {"1":["Late","Never Showed"],"2":["Background Failed"],"3":["Excessive pay request", "pours milk before cereal"]}

Based on what selection made in fail classification it will populate the next column with the appropriate dropdown selections.