jquery while php show hide

Question

<div class="commentfull">
    <?php $comment=m ysqli_query($connect, "SELECT * FROM comment WHERE product = '$p'"); $user=m ysqli_query($connect, "SELECT * FROM user"); $datauser=m ysqli_fetch_assoc($user); while ($datacomment=m ysqli_fetch_assoc($comment)) { ?>
    <div class="commentcontent">
        <div class="commentfill">
            <?php echo $datacomment[ 'comment']; ?>
        </div>
        <ul>
            <li class="commenttime">
                <p>
                    <?php echo $datacomment[ 'time']; ?>
                </p>
            </li>
            <li class="commentreply"><span id="triggerreply">Reply</span></li>
        </ul>
    </div>
    <div class="commentformreply">
        <form method="POST" id="myform" action="<?php echo $base; ?>/config/addcomment.php">
            <input type="hidden" name="p" value="<?php echo $p; ?>" />
            <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>
        </form>
    </div>
    <?php } ?>

jquery :

$("#triggerreply").click(function() {
    $(".commentformreply").slideDown("medium");
});
$(".commentclose").click(function() {
    $(".commentformreply").slideUp("medium");
});

css :

.commentformreply {display:none; }

so, when i clicked 'reply' its show every commentformreply, i just want one of them appearing on its place where i clicked, how to doing this?

Answer 1

Use closest() to select the parent .commentcontent element and then with next(), select the next div (which is .commentformreply element):

NOTE

As KAD said, you must not produce more that one element with the same id. Instead, add a class (that's what they are for!)

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});

EXAMPLE (WORKING)

Take a look at the following example. It works for multiple blocks of divs.

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});

.commentformreply { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="commentfull">    
        <div class="commentcontent">
            <div class="commentfill">Comment</div>
            <ul>
                <li class="commenttime"><p>Time</p></li>
                <li class="commentreply"><span class="triggerreply">Reply</span></li>
            </ul>
        </div>
        <div class="commentformreply">
            <form method="POST" id="myform" action="../config/addcomment.php">
                <input type="hidden" name="p" value="value>" />
                <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>    
            </form>
        </div>
  <div class="commentfull">    
        <div class="commentcontent">
            <div class="commentfill">Comment</div>
            <ul>
                <li class="commenttime"><p>Time</p></li>
                <li class="commentreply"><span class="triggerreply">Reply</span></li>
            </ul>
        </div>
        <div class="commentformreply">
            <form method="POST" id="myform" action="../config/addcomment.php">
                <input type="hidden" name="p" value="value>" />
                <textarea class="commentarea" name="comment" placeholder="Your comment"></textarea><span class="commentclose">cancel</span>    
            </form>
        </div>
</div>

Answer 2

You cannot access triggerreply as an Id of the element since when the html is loaded dynamically, the ID is gonna conflict with other elements of the same ID since you are loading your data in a loop.

So its best used as a class then called as follows :

$(".triggerreply").click(function(){
    $(this).closest('.commentcontent').next().slideDown("medium");
});
$(".commentclose").click(function(){
    $(this).closest('.commentformreply').slideUp("medium");   
});