Wix not reading custom added JS when using custom added HTML - velo

Question

I am new to wix. I have added custom HTML to a section like so
<div id="emptyLegBoard-container-outer">
<div id="emptyLegBoard-container-inner">
<div style="display: inline-block;width: 100%;">
<h1 style="width: fit-content;display: inline-block; color: white"><i style="color: orange"
class="fas fa-plane-departure"
aria-hidden="true"></i>Empty Legs</h1>
<h1 id="titleMonth" style="display: inline-block;float: right; color: white"></h1>
</div>
<div id="emptyLegBoard">
<table style="width: 100%; overflow: auto">
<tr id="boardHeadingRow">
<td style="width: 15%" class="boardHeadings">DATE</td>
<td style="width: 20%" class="boardHeadings">FROM</td>
<td style="width: 20%" class="boardHeadings">TO</td>
<td style="width: 20%" class="boardHeadings">TIME</td>
<td style="width: 25%" class="boardHeadings">PRICE</td>
</tr>
</table>
<div id="emptyLegBoardInner">
</div>
</div>
</div>
</div>
<script>
window.onload = function(e){
renderBoard();
}
</script>
then I have added some custom JS and CSS:
Header:
<script src="https://kit.fontawesome.com/dd348bbd0a.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<style>
i {
margin-right: 0.5em;
}
</style>
etc
Bottom of body:
<script>
function renderBoard() {
//my js code
}
</script>
etc...
Custom code
when the webpage load the css doesn't seem to be read and in the console I get "Uncaught ReferenceError: renderBoard is not defined"
so my custom code is not been read or my custom html code cannot reach it. Wondering how to fix this issue.
Custom html code
Thanks