如何让jQuery toggleClass（this）与多个元素

Question

我有一个侧边栏，通过在单击按钮后从左侧移动到视口中显示，然后在第二次单击时移回视口外部。这全部包含在外部div中，并且在添加新帖子时动态创建它的新副本，并且它们应该以相同的方式彼此独立地起作用。现在，每个新帖子中的每个按钮仅控制第一篇文章中的侧边栏。如何使用（this）功能仅针对每个帖子的侧边栏以及它自己的按钮？

＆＃13;

＆＃13;

( function( $ ) {
	$(document).ready(function() {
		 $('.sidebar-button').click(function(e) { 
			$('#page1Wrap').toggleClass('toggleActive');
		 });
	 });
} )( jQuery );

＆＃13;

.sidebar-button { /* Sidebar reveal button */
			position: absolute;
			top: 1.55em;
			right: 1.6em;
            display: block;
            height: 1.75em;
            padding: 0 .5em;
            font-weight: normal;
            font-size: 9px;
            font-size: .9rem;
            text-decoration: none;
            line-height: 1em;
			color: #000000;
			z-index: 999;
	}

    #page1Wrap {
		width: 100% !important;
		height: 60em !important;
		left: -20em;
		margin: 0 0 1.25em 0 !important;
	}
	.toggleActive {
		left: 0em !important;
	}

＆＃13;

<div class="post">
    <button class="sidebar-button" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars rotate"></i></button>
    <div id="page1Wrap">
        <div class="sidebar">
            <h1 class="category">Interaction</h1>
            <h4>Post category</h4>
            <h5>Project</h5>
            <h5>Brief</h5>
            <h5>Distribution format</h5>
            <h5>Software/technology used</h5>
            <h5>Notes</h5>
        </div>
        <div class="cell-1" style="background: url()"></div>
        <div class="cell-2" style="background: url()"></div>
        <div class="cell-3" style="background: url()"></div>
    </div> <!-- end page3Wrap -->
</div> <!-- end post -->

＆＃13;

＆＃13;

＆＃13;