jQuery .submit() for comment form

Question

I have a looping comment form which contain also all user's posts, like Facebook. When I click the first comment form on the first loop the jQuery + ajax works fine but the rest loop does not work. It refresh the page. I've tried the following codes below but still same result. Any solution how to fix this issue?

jQuery Code Test 1

$('#comment_form').submit(function(e) { 
  $.post('inc/process-form', $(this).serialize(), function(results) { 
    $('.show-results').html(results).slideToggle().delay(2000).slideToggle(); 
      $('#comment_form')[0].reset(); 
    }); 
  event.preventDefault(); 
 });

---

jQuery Code Test 2

$('#comment_form').submit(function() 
{ 
    event.preventDefault(); 
    $.ajax(
    { 
        beforeSend : function()
        {
            $('#show-results').html('Processing...'); 
        }, 
        url : 'inc/process-form', 
        type: 'POST', 
        data:(
        { 
            comment      : $('#content').val(), 
            pid          : $('#pid').val(), 
            date_comment : $('#date_comment').val() 
        }), 
        success : function(results) 
        { 
            $('.show-results').html(results).slideToggle().delay(2000).slideToggle(); 
            $('#comment_form')[0].reset(); 
        } 
    }); 
    return false; 
}); 

---

Comment Form on loop

 <form action="<?= $do->form_url(); ?>" method="post" id="comment_form" class="comment">
 <input type="text" name="comment" placeholder="Give me high five" maxlength="100" id="comment"/>
 <input type="hidden" name="pid" value="<?= $post->pid; ?>" id="pid"/>
 <input type="hidden" name="date_comment" value="<?= $do->asia_date_time(); ?>" id="date_comment"/>
 <button type="submit">SEND</button>
 </form>

---

PHP CODE

 if (isset($_POST['comment'])) : 
  $comment    = $do->is_empty($_POST['comment']); 
  $pid        = $do->is_empty($_POST['pid']); 
  $date_comment = $do->is_empty($_POST['date_comment']); 
  if (empty($comment)) { 
    $error = 'Comment should not be empty'; 
  } 
  if (!isset($comment{20})) { 
    $error = 'Comment should at least 20 character.'; 
  } 
  if (empty($error)) { 
    echo $db->insert_comment($comment, $_SESSION['uid'], $date_comment, $pid); 
  } else { 
    echo '<p class="error">' .$error .'</p>'; 
  } 
 endif; 

Answer 1

Because you are multiple elements with the id comment_form.. id of an element must eb unique.. so use a class name comment for the form to add the submit handler like

$('form.comment').submit(function () {
    event.preventDefault();
    var $form = $(this);
    $.ajax({
        beforeSend: function () {
            $('#show-results').html('Processing...');
        },
        url: 'inc/process-form',
        type: 'POST',
        data: ({
            comment: $form.find('input[name="comment"]').val(),
            pid: $form.find('input[name="pid"]').val(),
            date_comment: $form.find('input[name="date_comment"]').val()
        }),
        success: function (results) {
            $('.show-results').html(results).slideToggle().delay(2000).slideToggle();
            $form[0].reset();
        }
    });
    return false;
});

When you use id selector, it will return only the first element with the given id, so when you use $('#comment_form') it returns only the first form element, thus your submit handler get registered to only the first comment form