JSFiddle - React, Tailwind, and code Playground

HTML

<div id="documents"></div>

JavaScript

function buildTreeView(tree, jobCode){
       var treeHtml = "<div class='row'><div class='col-xs-12 col-sm-8 col-sm-offset-2'><div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h3 class='text-center'>View or Download Documents</h3></div><div class='panel-body'><ul class='list-group'>";
        for(var i =0;i < tree.length;i++){
          if(typeof tree[i] === 'object'){
            for(var ind = 0;ind < tree[i].length; ind++){
                //another element will be populated here
            }
          }else{
            treeHtml += "<li class='list-group-item viewDoc' data-docName='"+tree[i]+"' data-jobCode='"+jobCode+"'>"+tree[i]+"</li>";
          }
        }
        treeHtml += "</ul></div></div></div></div></div>";
        $('#documents').append(treeHtml);
}

buildTreeView('tree', 'jobCode');

$(document).on("click", ".viewDoc", function(){
    var docName = $(this).data('docname');
    var jobCode = $(this).data('jobcode');
    alert(docName + '/' + jobCode);
});