jQuery code works for last iteration of php loop generated button

Question

I'm creating a forum where people can vote on posts. The vote is called 'consents'.

<?php
$postshow = "SELECT * FROM ideas_1 ORDER BY consents DESC LIMIT 10";
$done = mysqli_query($conn, $postshow);
//$show = mysqli_fetch_assoc($done);

while ($show = mysqli_fetch_assoc($done)) {
    echo"<div class = 'comments'>";
    echo"<br>";   
    echo"<br>";
    echo $show['post'];
    echo"<br>";
    echo"<p class = 'counter'>";
    echo $show['consents'];
    echo"</p>";
    echo"<br>";
    $postid = $show['postid'];
    $userid = $show['userid'];
    $consents = $show['consents'];
      $asd = "SELECT * FROM consents WHERE dept = 'ideas' and task = '1' and postid = '$postid' and voterid = '$id'";
      $doit = mysqli_query($conn, $asd);
      $exist = mysqli_num_rows($doit);
      if ($exist == 0){
    echo"<button id = \"consents$postid\">Consent This</button>";
      }
    echo"</div>";


}
?>
<script>
    var posterid = "<?php echo $userid;?>"
    var postid = "<?php echo $postid;?>"
    var voterid = "<?php echo $id;?>"
    var consents = "<?php echo $consents;?>"

$(document).ready(function () {   
   $('#consents' + postid).click(function(){
    $(this).hide();
    $.post ("consentsideas.php", {
        dept: "ideas",
        task: "1",
        postid: postid,
        voterid: voterid,
        consents: consents,
        posterid: posterid
    });
    $(".counter").html(++consents);
   });
   $(".answer").mousedown(function(){
            $(".post_answer").show();
            });
   $(document).click(function(event) { 
    if(!$(event.target).closest('.post_answer').length) {
        if($('.post_answer').is(":visible")) {
            $('.post_answer').hide();
        }
    }        
}); 
  $(".post_answer").click(function(){
    var answer = $(".answer").val();
    $.post ("answerideas.php", {
        answer: answer,
        id: voterid
            });
    $(".answer").val('');
    });
}
  ); 
</script>

But any button looped by the while loop, when clicked, only updates the CONSENTS counter for the last iteration of the while loop. As you can see, I've made the button's id unique(I hope I did that correctly). So could anyone tell me where's the problem?

Answer 1

@musicnothing Hey, I've edited my code a bit. Now it works. Thanks man!

while ($show = mysqli_fetch_assoc($done)) {
    $postid = $show['postid'];
    $userid = $show['userid'];
    $consents = $show['consents'];?>
   <div class = 'comments'>
    <?php echo$show['post'];?><br>
    <?php echo$show['consents'];?> <span>Consents</span>

     <?php $asd = "SELECT * FROM consents WHERE dept = 'ideas' and task = '1' and postid = '$postid' and voterid = '$id'";
      $doit = mysqli_query($conn, $asd);
      $exist = mysqli_num_rows($doit);
      if ($exist == 0){ ?>
    <button class = 'consents' data-postid = '<?php echo$postid;?>' data-posterid ='<?php echo$userid;?>'
    data-voterid = '<?php echo$id;?>' data-consents = '<?php echo$consents;?>' >Consent This</button>
     <?php } ?>
   </div>


<?php }
?>
<script>


    var voterid = "<?php echo $id;?>"


$(document).ready(function () {
   $('.consents').click(function(){
    var postid = $(this).data('postid');
    var consents = $(this).data('consents');
    var posterid = $(this).data('posterid');
    $(this).hide();
    $.post ("consentsideas.php", {
        dept: "ideas",
        task: "1",
        postid: postid,
        voterid: voterid,
        consents: consents,
        posterid: posterid
    });
    $(".counter").html(++consents);
   });
   $(".answer").mousedown(function(){
            $(".post_answer").show();
            });
   $(document).click(function(event) { 
    if(!$(event.target).closest('.post_answer').length) {
        if($('.post_answer').is(":visible")) {
            $('.post_answer').hide();
        }
    }        
}); 
  $(".post_answer").click(function(){
    var answer = $(".answer").val();
    $.post ("answerideas.php", {
        answer: answer,
        id: voterid
            });
    $(".answer").val('');
    });
}
  ); 
</script>

Answer 2

echo"<button class = 'consents' data-postid = '$postid' data-posterid ='$userid' data-voterid = '$id' data-consents = '$consents' >Consent This</button>";
      }



}
?>
<script>


$(document).ready(function () {


   $('.consents').click(function(){
    var posterid = $(this).data('posterid');
   var postid = $(this).data('postid');
   var voterid = $(this).data('voterid');
  var consents = $(this).data('consents');


    $(this).hide();
    $.post ("consentsideas.php", {
        dept: "ideas",
        task: "1",
        postid: postid,
        voterid: voterid,
        consents: consents,
        posterid: posterid
    });
    $(".counter").html(++consents);
   });
   $(".answer").mousedown(function(){
            $(".post_answer").show();
            });
   $(document).click(function(event) { 
    if(!$(event.target).closest('.post_answer').length) {
        if($('.post_answer').is(":visible")) {
            $('.post_answer').hide();
        }
    }        
}); 
  $(".post_answer").click(function(){
    var answer = $(".answer").val();
    $.post ("answerideas.php", {
        answer: answer,
        id: voterid
            });
    $(".answer").val('');
    });
}
  ); 
</script>

Now the consent button won't work. And also, I'm not seeing my 'post' button($(".post_answer"))

Answer 3

The problem is not in your PHP; it's in your JavaScript. You're setting postid once, using the very last $postid that is set in the last iteration of the while loop.

One way to solve this problem is by binding the click event not to the id (like #consents123) but rather to a class that is set on each of the "Consent This" buttons (like .consents).

Then you'll need to cache the other data you need (like postid) somewhere, for example as a data attribute on the button, or in the element id, and then retrieve it when you need it in the click handler.

PHP

<button id = \"consents$postid\" class="consents" data-postid="$postid">Consent This</button>

JS

$('.consents').click(function() {
    ...
    var postid = $(this).data('postid');
    ...
});