I am just trying to display hiddens items in django template when checkbox is checked, but in my console i am getting

1:194 Uncaught TypeError: Cannot read properties of null (reading 'checked')
    at inventoryFunction (1:194:22)
    at HTMLInputElement.onclick (1:107:73)

the items are hidden in a table and when i check a category i am hoping to get them displayed here is the template :

<div class="inventory-content">
    <div class='category'>
        <div>Categories</div>
        <div class='category-checkbox'>
            {%for category in categories%}
            <input type="checkbox" id="{{category.id}}" onclick="inventoryFunction()">
            <label for="{{category.id}}"> {{category.name}}</label><br>
            {%endfor%}
        </div>
    </div>
    <div class='items'>
        {% for category in items%}
        <div class='{{category.id}}' style="display:none">
            <div>{{category}}</div>
            <table class='runninghours-table'>
                <tr>
                    <th>Item name</th>
                    <th>part number</th>
                    <th>R.O.B</th>
                </tr>
                <tbody>
                    {%for item in category.items.all%}
                    <tr>
                        <td>{{item.name}}</td>
                        <td>{{item.part_number}}</td>
                        <td>{{item.ROB}}</td>
                    </tr>
                    {%endfor%}
                    </tobdy>
            </table>
        </div>
        {%endfor%}
    </div>

</div>

the JavaScript :

<script>
    function inventoryFunction() {
        var checkBox = document.getElementById("{{category.id}}");
        var item = document.getElementsByClassName("{{category.id}}");
        if (checkBox.checked == true) {
            item.style.display = "block";
        } else {
            item.style.display = "none";
        }
    }
</script>