I am currently working on creating a comment reply section. I have managed to load the same div for reply that I use for commenting by utilizing
$('#1').append($('.enterComment').html());The .enterComment div contains a hidden submitPost button, which is designed to become visible as soon as the user begins typing a comment.
While the div is loading correctly, I am encountering an issue where, upon loading the same div in the reply section and typing in it, the hidden div only appears in the main comment section, not the reply one.
Here is the structure of my HTML:
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div id="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
For the reply section, I have:
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
and here is the associated script:
$("body").on('focus', 'textarea', function() {
$('#commentOptions').fadeIn(1000);
});
$("body").on('click', '#1 p .reply', function() {
$('#1').append($('.enterComment').html());
});