Кнопка не активна при прокрутке данных

Question

У меня есть страница, которая содержит это html:

<article class="single-post shibbir post-97 post type-post status-publish format-standard has-post-thumbnail hentry category-arts-entertainment" id="post-97">
    <div class="post-thumbnail">            
    </div> 
    <header class="entry-header">
        <div class="post-category">                 
        </div>              
        <div class="entry-meta">
        </div>          
        <div class="social-share">
        </div>
    </header>
    <div class="entry-content">
        <h4>Debitis esse est eius corrupti accusantium. Est et amet distinctio. Vitae aut nisi ullam aspernatur</h4>
        <hr>
    </div>      
    <div class="mt-1">
        <div class="social-share">
        </div>
    </div>
    <div class="post-author-wrapper">
        <div class="post-author-thumb">
            <img src="http://2.gravatar.com/avatar/efe9291a2088f828518921548d88d4b3?s=97&amp;d=mm&amp;r=g">
        </div>
        <div class="post-author-content">               
        </div>
    </div>  
    <div class="post-comment-wrapper">
        <div class="post-comment-btn">
            <button class="button_one single-post-comment" type="button">
                view comments on this story                 
            </button>
        </div>
        <div class="post-comments" id="post-comments">
            <div class="comments-area" id="comments">
            </div>
        </div>
    </div>      
</article>

При прокрутке этот HTML article упаковщик тегов отображается каждый раз.

Теперь я использую jQuery toggle(), чтобы показать и скрыть класс .post-comments. Но он работает с первым .post-comments классом, а не с более поздними.

jQuery / JS код, который я использую:

window.EStrap = (function (window, document, $, undefined) {
    'use strict';
    var app = {
        init: function () {
            console.log('Working');
            $(window).on('scroll', app.handleSticky);
            $('.hamburger-btn').on('click', app.toggleNavDrawer);
            $('.nav-drawer-close').on('click', app.closeNavDrawer);
            $('.single-post-comment').on('click', app.toogleComment);           
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 5,
                responsiveClass: true,
                dots: false,
                responsive: {
                    0: {
                        items: 3,
                        nav: true
                    },
                    600: {
                        items: 4,
                        nav: false
                    },
                    1000: {
                        items: 4,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            });                     
        },
        toogleComment:function() {
            var that = $(this);
            //console.log( that );
            //that.parent('.post-comment-btn').next('#post-comments').toggle();
            that.parent().next( $('.post-comments').toggle() );

        },      
        handleSticky:function () {
            if ($(window).scrollTop() > 600) {
                $('#main-nav').addClass('sticky-header');
            } else if ($(window).scrollTop() < 300) {
                $('#main-nav').removeClass('sticky-header');
            }
        },
        toggleNavDrawer:function () {
            var $nav_drawer = $('#nav-drawer');
            $nav_drawer.toggleClass('open');
        },
        closeNavDrawer:function () {
            var $nav_drawer = $('#nav-drawer');
            $nav_drawer.removeClass('open');
        }
    };

    $(document).ready(app.init);
    return app;
})(window, document, jQuery);

Можете ли вы сказать мне, что я я здесь не так делаю?

toogleComment:function() {
    var that = $(this);
    //console.log( that );
    //that.parent('.post-comment-btn').next('#post-comments').toggle();
    that.parent().next( $('.post-comments').toggle() );

},