Show HTML for specific div on click

Show HTML for specific div on click

I have some HTML and Ajax set up so that if you click a certain image (the
reply-quote class below), it initiates some Ajax to echo HTML elsewhere on
the page.
As shown below, the HTML file contains the same block of divs multiple
times. My problem is that, if a user clicks the image, how can I make Ajax
show the HTML (within show-reply div) for that specific block and not all
of them?
<!-- BLOCK ONE -->
<div class="style1">
<div class="style2">
<img src="image.png" class="reply-quote" />
<div class="style3">
<div class="style4">
<div id="show-reply"></div>
<div class="reply-box">
<form class="reply-container no-margin" method="POST" action="">
<textarea class="reply-field" name="new_comment"
placeholder="Write a reply..."></textarea>
<button name="submit" class="btn" type="submit">Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- BLOCK TWO -->
<div class="style1">
<div class="style2">
<img src="image.png" class="reply-quote" />
<div class="style3">
<div class="style4">
<div id="show-reply"></div>
<div class="reply-box">
<form class="reply-container no-margin" method="POST" action="">
<textarea class="reply-field" name="new_comment"
placeholder="Write a reply..."></textarea>
<button name="submit" class="btn" type="submit">Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's the JQuery I have right now:
$(document).ready(function() {
$(".reply-quote").click(function() {
$.ajax({
url: 'assets/misc/show_reply.php', // this file simply echoes back
the HTML to the `show-reply` div
type: "POST",
data: {post_id: $(this).attr('id')},
success: function(data) {
$("#show-reply").append(data); // this is where the problem lies
}
});
});
});
To my understanding, I have to somehow implement $(this), parent(),
find(), etc. instead of the current line I'm using
($("#show-reply").append(data);). The question is, what should that line
be so that if I click the image, it only shows the HTML for that specific
block?
Please help!