this.RowClicked is not a function at HTMLTableCellElement.eval When trying to get the id of a 'tr' element

I'm not familiar with how to get specific properties of dynamically created HTML elements. I'm trying to get the id of the table row element so that I can pass this information on to other things within my application, but I'm struggling to get it to work. Essentially I have a modal that pops up when I click on a row in the main table, which shows more information about what I clicked on. I'm taking it another step further and want to do the exact same thing with the current modal, but I keep getting this error: this.RowClicked is not a function at HTMLTableCellElement.eval

Here is a snippet of my file

Info(){
... some stuff above

var arrayToPush = [];
        for(var f = 0; f < results.length; f++){
            if(results[f].length >= 3){
                arrayToPush.push(results[f]);
            }
        }

        for(var g = 0; g < arrayToPush.length; g++){
            var tr = document.createElement('tr');
            tr.className = 'TableBodyRow';
            tr.id = g;
            tr.value = g;

            var td1 = document.createElement('td');
            td1.className = 'tableData50';
            td1.id = arrayToPush[g][0].KioskID + "" + g;
            td1.innerHTML = arrayToPush[g][0].KioskID;

            var td2 = document.createElement('td');
            td2.className = 'tableData50';
            td2.id = arrayToPush[g][0].KioskID + "" + g;
            td2.innerHTML = arrayToPush[g].length;

            tr.appendChild(td1);
            tr.appendChild(td2);

            document.getElementById('TBody').append(tr)
        }

$("td").click(function(e){
            document.getElementById('ModalTBody').innerHTML = "";
            var id = e.target.id;
            var arrayInt = id.split("")[1]
            parseInt(arrayInt)

            for(var h = 0; h < arrayToPush[arrayInt].length; h++){
                var tr = document.createElement('tr');
                tr.className = 'TableBodyRow';
                tr.id = arrayToPush[arrayInt][h].JobID
                tr.onclick = this.RowClicked(e);

                var td1 = document.createElement('td');
                td1.className = 'tableData20';
                td1.innerHTML = arrayToPush[arrayInt][h].KioskID;
                td1.id = arrayToPush[arrayInt][h].JobID

                var td2 = document.createElement('td');
                td2.className = 'tableData20';
                td2.innerHTML = FormatDateTime1(arrayToPush[arrayInt][h].TimeStamp);
                td2.id = arrayToPush[arrayInt][h].JobID

                var td3 = document.createElement('td');
                td3.className = 'tableData20';
                td3.innerHTML = (arrayToPush[arrayInt][h].KioskIssueID);
                td3.id = arrayToPush[arrayInt][h].JobID

                var td4 = document.createElement('td');
                td4.className = 'tableData20';
                td4.innerHTML = (arrayToPush[arrayInt][h].LastStep);
                td4.id = arrayToPush[arrayInt][h].JobID

                var td5 = document.createElement('td');
                td5.className = 'tableData20';
                td5.innerHTML = (arrayToPush[arrayInt][h].Serviced) == true ? "Serviced" : "-";
                td5.id = arrayToPush[arrayInt][h].JobID

                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);

                document.getElementById('ModalTBody').append(tr)
            }

            document.getElementById('IssueModal').style.display = 'block';
        })
}

RowClicked(e){
        let click = e.target.id;
        console.log(click);
    }

Here is my render function

render(){
        return(
            <div className="ViewedContentContainer" id="OpenContainer">
                <div className="TitleBarContainer">
                    <h1 title="Kiosk analytics">Kiosk Issue Tracking</h1>
                </div>

                <div style={{width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                    <button className="RTIButton" onClick={() => this.RenderInfo(this.state.Reports, this.state.Alerts, 3, this.props.issues, this.state.Jobs)}> 3 Days </button>
                    <button className="RTIButton" onClick={() => this.RenderInfo(this.state.Reports, this.state.Alerts, 7, this.props.issues, this.state.Jobs)}> 7 Days </button>
                    <button className="RTIButton" onClick={() => this.RenderInfo(this.state.Reports, this.state.Alerts, 14, this.props.issues, this.state.Jobs)}> 14 Days </button>
                    <button className="RTIButton" onClick={() => this.RenderInfo(this.state.Reports, this.state.Alerts, 28, this.props.issues, this.state.Jobs)}> 28 Days </button>
                </div>

                <br />

                <table className="TableHeaderContainer">
                    <thead>
                        <tr>
                            <th className="tableData50" id="TITL"> KioskID </th>
                            <th className="tableData50" id="TITL"> Number of Issues </th>
                        </tr>
                    </thead>
                </table>
                <div className="TableBodyScrollingDiv" id="TBSD">
                    <table className="TableBodyContainer">
                        <tbody id="TBody">

                        </tbody>
                    </table>
                </div>

                <div id="IssueModal" style={{display: "none", position: 'absolute', zIndex: 1, left: 0, right: 0, width: '97.1%', height: '100%', marginTop: '-137px'}}>
                    <div id="IssueBackground" style={{backgroundColor: 'rgba(0,0,0,0.65)', height: '100%', width: '100%', position: 'absolute'}}>
                        <div id="IssueModalContent" style={{width: '972px', maxHeight: '650px', marginLeft: 'auto',  marginRight: 'auto', marginTop: '8%', backgroundColor: '#ffffff', overflowY: 'auto'}}>
                            <table className="TableHeaderContainer" style={{minWidth: '972px'}}>
                                <thead>
                                    <tr>
                                        <th className="tableData20" id="TITL"> KioskID </th>
                                        <th className="tableData20" id="TITL"> Date of Issue </th>
                                        <th className="tableData20" id="TITL"> Issue </th>
                                        <th className="tableData20" id="TITL"> Last Step </th>
                                        <th className="tableData20" id="TITL"> Serviced </th>
                                    </tr>
                                </thead>
                            </table>
                            <div className="TableBodyScrollingDiv" id="TBSD">
                                <table className="TableBodyContainer" id="TBC">
                                    <tbody id="ModalTBody">

                                    </tbody>
                                </table>
                            </div>   
                        </div>
                        <button className="Button" style={{float: 'right', position: 'relative', right: '278px', top: '2px'}} onClick={this.closeModal}>Close</button>
                    </div>
                </div>

                <div id="InnerModal" style={{display: 'none'}} className="InnerModal">
                    <div id="InnerBackground" className="InnerBackground">
                        <div id="InnerConent" className="InnerContent">
                            {this.DisplayNotes()}
                        </div>
                    </div>
                </div>

            </div>
        )
    }

If anyone has any suggestions on how I could get the id of the 'tr' element that was clicked that would be great. I would like to keep it more javascript related, but if it's easier to do with jquery, then I'm all ears. Thanks.