Can't toggle comments correctly

Hi, I’m having problems to make each posts comment-section open when toggling its respective h2-element in the blog feed. Right now, as you can see on the webpage I’m working on HERE , only the first comment opens on toggle. This might be both a javaScript and WordPress-related question, but what I want to be able to do is to make the function displayComments() to toggle the specific comments for its h2-element comments-title. I’ve tried to use this.nextSibling in the function but can’t figure out how to make it work. Any suggestions would be really helpful!
The code below is from the comments.php:

<script src="scripts.js"></script>
<script type="text/javascript">
function displayComments() {
       var e = document.getElementById("comments_open");
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}
</script>

<div id="comments" class="comments-area">
	<?php if ( have_comments() ) : ?>
		<h2 class="comments-title" onclick="displayComments()"> <span class="comments-title-span">
		<?php printf( _nx( 'One comment', '%1$s comments', get_comments_number(), 'comments title', 'catchadaptive' ),
		number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
		?> </span> </h2>
</div>
	<div id="comments_open" class="comments-area" style="display: none">

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
	<nav id="comment-nav-above" class="comment-navigation" role="navigation">
	<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'catchadaptive' ); ?></h1>
	<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'catchadaptive' ) ); ?></div>
	<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'catchadaptive' ) ); ?></div>
	</nav><!-- #comment-nav-above -->
	<?php endif; // check for comment navigation ?>
	<ol class="comment-list">
	<?php