Ajax无法对循环中的其他项进行评论

Question

I can comment with only first item in while loop, When I tried to comment with another item it's always display alert box You know you need to write a comment right?. I think it can't get comment text on another item in my loop, What's wrong with my code?

I've got this comment code from this link.

My code:

Ajax in index.php

<script type="text/javascript">
    $(function () {
        // Alert(event.timeStamp);
        $('.new-com-bt').live('click', function (evt) {
            $(this).hide();
            $('.new-com-cnt').show();
            $('#name-com').focus();
        });

        /* When you click on the cancel button */
        $('.bt-cancel-com').click(function () {
            $('.the-new-com').val('');
            $('.new-com-cnt').fadeOut('fast', function () {
                $('.new-com-bt').fadeIn('fast');
            });
        });

        // On post comment click 
        $('.bt-add-com').live('click', function (evt) {
            var comment_on_id = $("input[name=comment_on_id]");
            var theCom = $("textarea[name=comment-text]");
            var theName = $('#name-com');
            var theMail = $('#mail-com');

            if (!theCom.val()) {
                alert('You know you need to write a comment right?');
            } else {
                $.ajax({
                    type: "POST",
                    url: "ajax/add-comment.php",
                    data: 'act=add-com&id_post=' + comment_on_id.val() + '&name=' + theName.val() + '&email=' + theMail.val() + '&comment=' + theCom.val(),
                    success: function (html) {
                        theCom.val('');
                        theMail.val('');
                        theName.val('');
                        $('.new-com-cnt').hide('fast', function () {
                            $('.new-com-bt').show('fast');
                            $('.new-com-bt').before(html);
                        })
                    }
                });
            }
        });

    });
</script>

---

scroll.js in index.php

var ajax_arry=[];
 var ajax_index =0;
 var sctp = 100;
 $(function(){
 $('#loading').show();
 $.ajax({
 url:"scroll.php",
 type:"POST",
 data:"actionfunction=showData&page=1",
 cache: false,
 success: function(response){
 $('#loading').hide();
 $('#demoajax').html(response);

 }

 });
 $(window).scroll(function(){

 var height = $('#demoajax').height();
 var scroll_top = $(this).scrollTop();
 if(ajax_arry.length>0){
 $('#loading').hide();
 for(var i=0;i<ajax_arry.length;i++){
 ajax_arry[i].abort();
 }
 }
 var page = $('#demoajax').find('.nextpage').val();
 var isload = $('#demoajax').find('.isload').val();

 if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
 $('#loading').show();
 var ajaxreq = $.ajax({
 url:"scroll.php",
 type:"POST",
 data:"actionfunction=showData&page="+page,
 cache: false,
 success: function(response){
 $('#demoajax').find('.nextpage').remove();
 $('#demoajax').find('.isload').remove();
 $('#loading').hide();

 $('#demoajax').append(response);

 }

 });
 ajax_arry[ajax_index++]= ajaxreq;

 }
 return false;

 if($(window).scrollTop() == $(window).height()) {
 alert("bottom!");
 }
 });

});

---

scroll.php

<?php
include('db.php');

if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];

 call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
 $page = $data['page'];
 if($page==1){
 $start = 0;
 }
 else{
 $start = ($page-1)*$limit;
 }

 $sql = "select * from infinitescroll order by id asc limit $start,$limit";
 $str='';
 $data = $con->query($sql);
 if($data!=null && $data->num_rows>0){
 while( $row = $data->fetch_array(MYSQLI_ASSOC)){
    $post_to_itemid = $row['id'];
 $str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p>";
$str .= "<div class='new-com-bt'>
            <span>Type something ..</span>
         </div>
         <div class='new-com-cnt'>
           <br>
           <input type='hidden' value='".$post_to_itemid."' name='comment_on_id'>
           <textarea class='the-new-com' name='comment-text'></textarea>
           <div class='bt-add-com'>Comment</div>
           <div class='bt-cancel-com'>Cancel</div>
       </div></div>";
 }
 $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
 }else{
 $str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
 }
echo $str;
}
?>