Target and update dynamically created content using AJAX - php

Question

I am trying to create a question/answer system where a user can reply to existing questions. The question system is correctly posting and displaying to the database, but I am having difficulties replying to dynamically created questions.
To save space here is the code that is failing
$(document).ready(function() {
//make sure it was the postReply button
$("#postReply").on("click", function(){
//get the questionID the user just clicked on
var questionID=$(this).val();
//hide the reply button
$("#postReply").hide();
//show the reply framework
$('.reply').append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>');
});
});
Called from this line within a loop:
echo '<p><button type="submit" id="postReply" value='.$questionID.'>Reply</button></p> ';
echo '<div class="reply" id="reply'.$questionID.'">';
The issue that I hit is that I am updating and adding the div to every single question because of the .reply is incorrectly targeting. I can't seem to get it to target the questionID that was clicked. I have tried testing it with alerts but only the most recent question button is parsing to the script.
I can only hide the button from the most recent comment added.
This is the output of the HTML source that is being created from the SQL query
<p>Question ID: 34 Title: z Description: zz Date Posted:2017-08-04 05:31:28</p>
<p><button type="submit" id="postReply" value=34>Reply</button></p>
<div class="reply" id="reply34"></div>
When clicking the Reply button to the above question the code should look something like:
<p>Question ID: 34 Title: z Description: zz Date Posted:2017-08-04 05:31:28</p>
<div class="reply" id="reply34">
<div class="replycontent">
<p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p>
<p><button id="postAnswer" type="submit">Post Answer</button></p>
</div>
</div>

Answer 1

I am not sure to really understand the problem, but try replace this:
$('.reply').append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>');
by this:
$('#reply' + questionID).append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>');
Your fields have all a different ID attribute, so you can use it.
And to hide your button, since they have all the same ID, your selector can look like $('#postRelpy[value="' + questionID + '"]').