[Solved] TextBox Keyup event not triggered when using ASP.Net Master Page

I am trying to use keyup to filter gridview list, using the below script.

The keyup event is not triggered when the web page is linked to a Master Page, but it works perfect when the page is not linked to a Master Page.

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage33.master" EnableEventValidation="false" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%;">
        <asp:TextBox ID="SearchBox1" runat="server" ClientIDMode="Static" placeholder="Search for details.."></asp:TextBox>
        <br>
        <br>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%"
            ShowHeader="true" OnPreRender="GridView1_PreRender" AllowSorting="True" OnSorting="GridView1_Sorting" AllowPaging="True" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="2">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>
        <asp:Label ID="LabelEntryCount" runat="server" />
        <br />
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('SearchBox1');
            const gridViewRows = document.querySelectorAll('#GridView1 tbody tr');
            console.log('TextBox ClientID:', 'SearchBox1'); // Log the ClientID
            if (searchInput) {
                searchInput.addEventListener('keyup', function () {
                    try {
                        const filter = searchInput.value.toLowerCase();
                        gridViewRows.forEach(row => {
                            const cells = row.getElementsByTagName('td');
                            let rowContainsSearchTerm = false;
                            for (let i = 0; i < cells.length; i++) {
                                if (cells[i].textContent.toLowerCase().includes(filter)) {
                                    rowContainsSearchTerm = true;
                                    break;
                                }
                            }

                            row.style.display = rowContainsSearchTerm ? '' : 'none';
                        });
                    } catch (error) {
                        console.error('An error occurred while filtering the rows:', error);
                    }
                });
            } else {
                console.error('Search input not found. Check the ClientID.');
            }
        });
    </script>
</asp:Content>