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

Question

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>

Answer 1

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;
    }