проблема с javaScript asp.net core

Я хочу скрыть блок на JavaScript-е который находится на таблице. Я создаю таблицу в цикле. Без цикла работала нормально но с циклом не работает.

мой код cshtml:

<script>
function text(idd){
    document.getElementById(idd).style.display=='none';
}
</script>
<header>
    <table>
        <thead>
        @{
            string id = "i"; //объявляю id
            foreach (List<string> row in Model.DataTable)
            {
                id += "i"; //обновляю id
                <tr onclick="text(id)">
                    @{
                        foreach (string cell in row)
                        {
                            <th style="background-color: #6c757d">@cell</th>
                        }
                    }
                </tr>
                <tr>
                    <th colspan="10">
                        <div id="@id" style="display: inline">
                            <p>какой то текст</p>
                        </div>
                    </th>
                </tr>
            }
        }
        </thead>
    </table>
</header>

html вывод:

<header>
        <table>
            <thead>
            <tr>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Отчество</th>
                <th>Дата рождения</th>
                <th>Телефон</th>
                <th>СоцСети</th>
                <th>Пол</th>
                <th>Статус</th>
                <th>Yandex</th>
                <th>Google</th>
            </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="ii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="iii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
                    <tr ondblclick="text(id)">
                                <th style="background-color: #6c757d">dffsd</th>
                                <th style="background-color: #6c757d">dffsd1</th>
                                <th style="background-color: #6c757d">dffsd2</th>
                                <th style="background-color: #6c757d">dffsd3</th>
                                <th style="background-color: #6c757d">dffsd4</th>
                    </tr>
                    <tr>
                        <th colspan="10">
                            <div id="iiii" style="display: inline">
                                <p>asdkjfhsakdlhfhaksjlhfkjasdhkfjhaslkdjfhkadfadsfsdafasdf</p>
                            </div>
                        </th>
                    </tr>
            </thead>
        </table>
    </header>

браузер выдаёт вот такую ошибку: "Uncaught TypeError: Cannot read property 'style' of null"