无法使用JavaScript附加模式

Question

使用pnp和JavaScript提取数据时，无法将某个div附加到模式中。

整个过程说明：
函数DomyApiCalls- WORKS （在带有标题的所有框中拉）
函数过滤- WORKS （按字母顺序过滤名称）

函数getModal-不起作用（当用户单击一个框时，我想要它，模态显示并仅将所有 filesHtml 附加到.Modalbody课。

这是页面标题，我需要下面的folderName。

$(document).ready(function(){
    DoMyApiCalls("boxWrap");

    var current_title = $(document).attr('title'); //CURRENT_TITLE is supposed to be the "FolderName".

    if(current_title == 'Acuvue') {
		    getModal("Acuvue");
    }
});

function DoMyApiCalls(elementId) {
$.ajax({
    url:  "/bdm/business-development/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,TileOrder&$orderby=Title asc",
    type: "GET",
    headers: {
        "accept": "application/json; odata=verbose"
    },
    success: function (data) {
		if (data.d.results) {
			var object = data.d.results;
			var Line1var;

			for(var i = 0; i < object.length; i++)
			{
				if(object[i].Line1 != null) { // Covers 'undefined' as well
					Line1var = "<div class='Line1'>" + object[i].Line1 + "</div>";
				} else {
					Line1var = "";
				}
				
				$('#' + elementId).append("<div class='col-md-4 box' data-toggle='modal' data-target='#modal"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div id='titleBox' class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; margin-left: auto; margin-right: auto; display: block;' src='" +  object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");
				
				filtering(object[i].Title);     
			  }		
		  }
    }									
  });
};

function filtering(title) {
    var filter = "Name eq '" + title + "'";
    
    $pnp.setup({
        baseUrl: "/bdm/business-development/"
    });
    
    $pnp.sp.web.folders.getByName('Completed Submissions').folders.filter(filter).expand("Files").get().then(function(data){    
    });
}

function getModal(folderName) {
	
  $pnp.setup({
		baseUrl: "/bdm/business-development/Completed%20Submissions/"
	});

	$pnp.sp.web.getFolderByServerRelativeUrl("/bdm/business-development/Completed%20Submissions/" + folderName).files.orderBy("Name").get().then(function(f) {

		var files = '';

		$.each(f, function(index, value){
			var filesHtml = "<div class='file'>" + 
								"<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><img src='//PublishingImages/wordThumbSmall.png'/></a>" + 
								"<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><p id='fileTitle'>" + value.Title + "</p></a>" + 
							"</div>";
			
			files = files + filesHtml;
		});
		$(".Modalbody").append(files);
	});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><div id="x">&times;</div></button>
                <h4 class="modal-title">

                </h4>
            </div>
            <div class="modal-body">
                <div class="FT-main-category" style="margin-top:0px;">
                    <div class="FT-main-header ms-WPBody"><strong><span style="color: white;">Files</span></strong></div>
                    <div class="Modalbody">
                    
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>