Trying to target the closet selector to the click

Trying to target the closet selector to the click

Hello! I have this section that is dynamically added to a page in Wordpress with Advanced Custom Fields if needed as many times as the layout asks. I originally only had one of these sections on the page and it worked great but now I have the issue that when there are two or more of these sections added all the slideDown/slideUp act on click of any of the buttons. I have been looking for a way to utilize .next() or .closest() but not finding the solution so that the closest div class of .layer--content_slide_out will slide down/up and not all of them. Here is my HTML code:

  1. <section class="layer--content_slide_out">

  3.   <div class="container row">

  5.     <div class="row">
  6.         <div class="layer--content_slide_out_content">
  7.           <?php echo $layer['content_1']; ?>
  8.           <?php if($layer['has_button_content_1'] && !empty($layer['has_button_content_1'])): ?>
  9.           <a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_1']; ?></a>
  10.           <?php endif ?>
  11.         </div>
  12.         <div class="push_six layer--content_slide_out_content">
  13.           <?php echo $layer['content_2']; ?>
  14.           <?php if($layer['has_button_content_2'] && !empty($layer['has_button_content_2'])): ?>
  15.           <a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_2']; ?></a>
  16.           <?php endif ?>
  17.         </div>
  18.     </div>

  20.   </div>

  22. </section>
  23. <section class="layer--content_slide_down">

  25.   <div class="container row">

  27.     <div class="layer--content_slide_down_content">

  29.       <div class="left-content">
  30.         <?php echo $layer['slide_content_1']; ?>
  31.       </div>

  33.       <div class="right-content">
  34.         <?php echo $layer['slide_content_2']; ?>
  35.       </div>

  37.     </div>

  39.     <div class="close-x">
  40.       <span>X</span>
  41.     </div>

  43.   </div>

  45. </section>

Here is my jQuery code:

  1. /* Content Slide Out */
  2.   $('.layer--content_slide_down_button').click(FadeSlideIn);
  3.   $('.close-x').click(FadeSlideOut);

  5.   function FadeSlideIn(ID) {
  6.       $(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideDown('slow');
  7.   }

  9.   function FadeSlideOut(ID) {
  10.       $(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideUp('slow');
  11.   }