单击时显示特定div的HTML

Question

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!

Answer 1

First: ID should be unique in a document, use class attribute instead for show-reply and other elements where id is repeated

<div class="show-reply"></div>

then you need to find the show-reply next to the clicked reply-quote image

$(document).ready(function() {   

    $(".reply-quote").click(function() {
        var $reply = $(this);
        $.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) {
                $reply.closest('.comment-container').find(".show-reply").append(data);
            }
        });
    });
});