Collapsible populated within Javascript won't work

Question

I am trying to create a collapsible that is populated within a Javascript and written to the HTML, but for some reason the results don't expand/collapse like they should. Most of the code is found on W3Schools and edited to fit my purposes.

HTML:

<div id="results">
    </div>

CSS:

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

JAVASCRIPT:

// for each JSON object in the results array
  for (index = 0; index < results.length; index++) {
    // add on to html with each NICE Role Title
    html += `<button class="collapsible">${results[index].NICE_Role_Title.value}</button>
<div class="content">
  <p>${results[index].NICE_Role_Description.value}</p>
</div>`
  }

  // send html to the front end (id = test_results)
  document.getElementById('results').innerHTML = html;

//Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

Answer 1

If You add this to the top of your javascript it will work,

let html = '';
let results = [{NICE_Role_Title: {value: 'test1'}, NICE_Role_Description: {value: 'desc1'}}, 
{NICE_Role_Title: {value: 'test2'}, NICE_Role_Description: {value: 'desc2'}}];

jsfiddle

Your example is missing some data to populate the collapsible.