Trying to build a website that kind of lets you read chapters from a book. However I'm trying to implement a show more button so that the screen won't get cluttered.

I'm doing this by making the display:none with the css nth child selector and then using javascript to get all the elements with a display none and making them visible again.

However I noticed that when I use the nth child selector to make some elements hidden, javascript now says they all have a display of block.

{% for chapter in chapters %}
         <div class="col-md-2 col-sm-12" id="chapter-list">
                <div class="chapter-link-container">
                    <a href="{% url 'chapter-detail' chapter.manga.slug chapter.slug %}">Chapter {{chapter.number}}</a>
                </div>
         </div>
{% endfor %}

#chapter-list:nth-child(2){
    display: none;
}

let listItems = document.getElementsByClassName('chapter-link-container')
for(i=0; i< listItems.length; i++){
    const style = getComputedStyle(listItems[i])
    console.log(style.display)
}

when log this it prints out block 4 times

However we know that the second child has a display none I ran this code again but only changed nth child to div just to make sure.

#chapter-list div{
    display: none;
}

and sure enough every display was none