How to target dynamically named element ids with jQuery (wordpress) - php

Question

I'm building a wp theme that calls all pages made to the home page. Those page (post) ids are named dynamically using the following php id="post-<?php the_ID(); ?>" They end up being named #post-1, #post-2, #post-3, etc...
Each instance is called to the home page in a minimized state, but each instance has a button that allows the user to maximize the content of that section. I'm achieving this by using jQuery to add a class to certain elements nested in that section when the button is clicked.
The problem is I don't know how to isolate ONLY the section in which the button is nested. Currently, when the user click the button it adds the class to each instances on the home page (each page (post) being called to the home page).
Does anyone know how I can write some jQuery that will allow me to target each section separately using the dynamically named posts, without actually typing #post-1, #post-2, post-3, etc... into the jQuery function?
Here's a simplified version of what I'm doing exactly:
$('.open-entry').click(function(){
$(".home-article").addClass("open");
});
.content {display: none;}
#home-article.open .content {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="post-<?php the_ID(); ?>" class="home-article">
<header class="home-closed-entry-header">
<button class="open-entry">explore</button>
</header> <!-- .home-closed-entry-header -->
<div class="content">
...some content
</div> <!-- .content -->
</article> <!-- .home-article -->
Any help is as always greatly appreciated!
thanks!

Answer 1

Use traverses. Within an event handler this refers to the element event occurred on. Given that as starting point you can walk through parts of the dom needed
closest() can take you up to the main <article> then from there you can use find() to look within that instance
$('.open-entry').click(function(){
var $article = $(this).closest(".home-article").addClass("open");
$article.find('.content').doSomething();
});

Answer 2

Based on your example there are a few ways you could isolate the section starting from the context of the button.
If the structure is always <section><header><button> then starting from the button you can just go up two parents:
$("button").click(function() {
var thePost = $(this).parent().parent();
...
});
If there will only be one section element above the button then you can look for the parent that's a section element:
$("button").click(function() {
var thePost = $(this).parents("section");
...
});
If you're looking for a parent whose ID starts with "post-" you can treat the ID as an attribute and use the "attribute starts with" selector:
$("button").click(function() {
var thePost = $(this).parents("[id^=post-]");
...
});