Creating checkboxes dynamically using Google App Script for a Web App

I have been able to produce a 2D Array where its elements are cells from a Google Sheet in Google Scripts. I want to display these as checkboxes in a Web app. However I cannot work out how to add these elements as checkboxes. From what I can understand the getElementById() function doesn't work so I can't add checkboxes through Google Script like I would in normal JS. I call this function through an onClick action in my HTML and the form element "equipForm" is not populated with anything...Below is a code I have attempted to use.

function populateEquipmentBoxes1(){
var equipment = getEquipmentArray(); //generates a 2D array
var outputDiv = document.getElementById("equipForm");

   for(var i=0; i<equipment.length;i++){
     for(var j=1;j<equipment[i].length;j++){
        equipment[i] = equipment[i].filter(function(n){ return n != "" });
        Logger.log(equipment[i][j]);
        var check = document.createElement("input");
        check.type = 'checkbox';
        check.id = equipment[i][1]+j; // need unique Ids!
        check.value = equipment[i][j];

        var label = document.createElement('label')
        label.htmlFor = equipment[i][j];
        label.appendChild(document.createTextNode('text for label after checkbox'));
        outputDiv.appendChild(check);
        outputDiv.appendChild(label);
     }
   }

}

I completely realise it is 99% due to a lack of understanding, however I don't really know how else to do what I am trying to do, any help or resources would be great!

Thanks!