jQuery on whileループで隠れ要素をフェードイン

Question

Replyボタンをクリックするとアクティブなwhileループのフォームがあります。これは私が簡単に行うことができますが、whileループで、一意のIDが必要です。私のコードでは今まで動作していますが、最初の結果に対してのみ動作します。他の結果をクリックしても何も起こりません。私はすでにユニークなIDを割り当てていますが、動作していません。

jQueryの一部：

$(document).ready(function() { 
    $("#reply").on('click', 'a.click', function() { 
     var rowid = $(this).attr("data-rowid"); 
     $(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800), 
     $(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']"); 
    }); 
}); 

PHP HTML部分：私のコードは以下の通りです

<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?> 
    <div id="reply"><a href="javascript:;" data-rowid="<?php echo $cmt_id?>" class="click show-reply-box">Reply</a></div> 
    <div class="reply-comment-holder" data-rowid="<?php echo $cmt_id?>" style="display:none;"> 
       <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="cmt_form_id_<?php echo $cmt_id?>"> 
       <input type="hidden" name="status_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id?>" /> 
       <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_<?php echo $cmt_id?>"></textarea> 
       </form> 
      </div> 
<?php } ?> 

をjQueryの/アヤックスで助けてください。

Answer 1

HTML

<div class="reply"><a href="javascript:;" data-rowid="1" class="click show-reply-box">Reply</a></div> 
<div class="reply-comment-holder" data-rowid="1" style="display:none;"> 
      <form method="post" action="#" class="full-width cmtform" id="cmt_form_id_1"> 
      <input type="hidden" name="status_id" value="1" id="cmtsid_1" /> 
      <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_1"></textarea> 
      </form> 
     </div> 
<div class="reply"><a href="javascript:;" data-rowid="2" class="click show-reply-box">Reply</a></div> 
<div class="reply-comment-holder" data-rowid="2" style="display:none;"> 
      <form method="post" action="#" class="full-width cmtform" id="cmt_form_id_2"> 
      <input type="hidden" name="status_id" value="2" id="cmtsid_2" /> 
      <textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_2"></textarea> 
      </form> 
     </div> 

javascriptの

$(document).ready(function() { 
    $(".reply").on('click', 'a.click', function() { 
     var rowid = $(this).attr("data-rowid"); 
     $(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800), 
     $(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']"); 
    }); 
}); 

jsbinは、上記のコメントに記載されています。