2 of 2
added 109 characters in body

Materialize css modal not working through JS innerHTML insertion

I'm trying to insert a Materialize CSS modal with JS innerHTML function but the modal doesn't work anymore not sure why. It works when normally in the document though.

  $(document).ready(function(){
    $('.modal-trigger').leanModal();
    insertModal();
  });

function insertModal(){
  var html = '';
  html += '<div class="col"><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> </div>';
  //Modal Structure
  html += '<div id="modal1" class="modal">';
  html += '<div class="modal-content"><h4>Modal Header</h4><p>A bunch of text</p></div>';
  html += '</div>';
  document.getElementById('modal-test').innerHTML = html;
}

Here is the demo I've of the issue im encountering https://codepen.io/RelativeBinary/pen/YBbmrg?editors=1010

I plan to have a loop which will insert a bunch of modals based on an array of objects, so each modal would contain different information, which is why im inserting from JS, so i don't have to manually type out each modal for each different object.

Any suggestions would be appreciated.

PS: Demo is fixed, still represents the issue but reflects the actual reason why it wasnt working better.