Maximum Call Stack Exceeded when calling function with onclick()

I have the following table:

<table class="reviewerTable" id="reviewersToBeAdded" style="overflow-y: hidden;">
            <thead>
                <tr>
                    <th>Group Name</th>
                    <th># of Accounts</th>
                    <th>Last Reviewed</th>
                    <th>Remove from Campaign</th>
                </tr>
            </thead>
            <tbody class="division">
               <tr>
                   <td>Cable Operations<input type="checkbox" style="display: none" data-toggle="toggle" onchange="toggleDivision(this)"></td>
                   <td>9</td>
                   <td>March 31, 2023</td>
                   <td><button class="deleteBtn" onclick="removeFromTable(this)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button></td>
               </tr>
               <tr class="department" style="" data-parent="Cable Operations">
                   <td padding-left:="" 50px;="" style="padding-left: 50px;">Core Data Platforms</td>
                   <td padding-left:="" 50px;="" style="padding-left: 50px;">2</td>
                   <td class="reviewedDate" style="padding-left: 50px;">March 31, 2023</td>
                   <td style="padding-left: 50px;"><button class="deleteBtn" onclick="removeFromTable(this)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button></td>
               </tr>
           </tbody>
</table>

When I click the button which calls onclick="removeFromTable(this)" then it is supposed to do the following:

<script>
    function removeFromTable(r) {
        // Grab the table row where the button was clicked and the corresponding tbody
        tr = $(r).parent('tr')
        parent = $(tr).parent('tbody')
        console.log(tr)
        console.log(parent)

        // Check if table row is a department or a parent
        if ($(tr).hasClass('department') == true) {
            value = $(parent).children()[0].textContent
            console.log(value)
        }
    }
</script>

But, I am receiving a “Maximum Call Stack Exceeded” error when I click the button. As far as I can tell, I am not calling any recursive functions so I am lost as to why it logs the same elements over and over again until the call stack is exceeded. Could nayone give me some insight into what could possibly be happening here?