getelementbyid只能在php循环中使用第一个id

I have some form that is embeded in php while loop, and its been processed by javascript through getelementbyid, whenever i submit, it will only submit the first form item on loop . below is my php

$qsel = "SELECT * FROM sellbusiness ORDER BY sn DESC LIMIT 2";
$results = mysqli_query($conn,$qsel) or die(mysqli_error());  
$num_rows = mysqli_num_rows($results);
              while($rows=mysqli_fetch_array($results)){
                $status = $rows['status'];
                $usern = $rows['username'];
                $video = $rows['video'];
            ?>

<input type="text" id="usercomment" value=" " name="comment"  placeholder="Enter your comment" class="form-control" />
<input type="hidden" name="postcode" id="postcode" value="<?php echo $postcodez; ?>"  class="form-control" />
<input type="hidden" name="username" id="username" value="<?php echo $usern; ?>"  class="form-control" />
<input type="hidden" name="commentor" id="commentor" value="<?php echo $username; ?>"  class="form-control" />
<span class="input-group-btn">
<button type="button" id="submit" onclick="myComment()" class="btn btn-primary btn-xs pull-right " >Post Comment!!!!</button>

<?php } ?>

and below is my ajax

<script type="text/javascript">

function myComment() {
var usercomment= document.getElementById("usercomment").value;
var commentor= document.getElementById("commentor").value;
var postcode = document.getElementById("postcode").value;
var username = document.getElementById("username").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'usercomment1=' + usercomment + '&commentor1=' + commentor + '&postcode1=' + postcode + '&username1=' + username ;

// AJAX code to submit form.
$.ajax({
type: "POST",
url: "commenthandler.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});

return false;
}
</script>

Try something like

function myComment(e) {
var elementparent=e.target.parentElement;
var usercomment= elementparent.getElementById("usercomment").value;
var commentor= elementparent.getElementById("commentor").value;
var postcode = elementparent.getElementById("postcode").value;
var username = elementparent.getElementById("username").value;
var dataString = 'usercomment1=' + usercomment + '&commentor1=' + commentor + '&postcode1=' + postcode + '&username1=' + username ;

// AJAX code to submit form.
$.ajax({
type: "POST",
url: "commenthandler.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});

return false;
    }

Wow there are a lot of things wrong with this, especially from a programming standpoint. You are not properly utilizing the framework that jQuery provides, it's like you're borrowing its AJAX functionality, but you're insisting on using difficult traditional JavaScript for everything else. One of the things jQuery is best at is selecting elements. Instead of stringing together the values of input fields, using (incorrectly) getElementById(), use the jQuery function .serialize() to encode the entirety of the data in your form. If you do this, you don't need to add unnecessary ids to your input fields.

I'll try to help so you have something that works.

$(document).ready(function() {
    $("#submit").click(function() {
        // AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "commenthandler.php",
            data: $("form").serialize(),
            cache: false,
            success: function(html) {
                alert(html);
            }
        });
    });
});

You can remove the onclick attribute from your <button>, since jQuery is able to bind a function to a button's click. You can continue to use $_POST['usercomment'], $_POST['postcode'] etc. from inside your PHP. But, it's important to realize, even if you can use jQuery nicely, that getElementById() doesn't return a single element, it returns an array of elements. This is why this doesn't work:

var usercomment= document.getElementById("usercomment").value;
var commentor= document.getElementById("commentor").value;

You are not specifying which element with ID usercomment to get the value from. If you were to use getElementById() for something, you would have to specify which element of the array to use, like this.

var usercomment = document.getElementById("usercomment")[0].value;
var commentor = document.getElementById("commentor")[0].value;

You are also missing a closing <span> tag in your sample.