jquery而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>

</div>