Ajax call for list with buttons not working

I have a list in which at the end is a button called Approve.

My goal is when the button is pressed that a variable called reviewid is passed to the php script called updateapprovalDB.php.

The code is generally doing what I want, however all the php script is called multiple times once for each reviewid.

I only want it called for the reviewid for that button.

My code is shown below.

echo ‘<h1>Review Approvals</h1>’;
$con = mysqli_connect(‘www.myvirtualpersonaltrainer.com’, ‘fitnevq7_a8e’, ’09DCB8Fc4m6x1o2l3h7p5′, ‘fitnevq7_a8e’);
$sql = “SELECT ID,post_author,post_date,post_content,post_status FROM `a8e_posts` WHERE `post_type`=’review'”;
$result = $con->query($sql);
$count = 0;
while ($row = $result->fetch_assoc()) {
$postDate = ($row[‘post_date’]);
$postAuthor = ($row[‘post_author’]);
$UserLogin = GetUserLoginByID($postAuthor);
$postContent = ($row[‘post_content’]);
$postStatus = ($row[‘post_status’]);
$reviewID = ($row[‘ID’]);
if ($count == 0) {
echo “Post Date ” . “Author ” . “Content ” . “Status <br>”;
echo “========= ” . “====== ” . “======= ” . “====== <br>”;
}
echo ” $postDate $UserLogin $postContent $postStatus “;
if ($postStatus == “draft”) {
?>
<button>Approve</button>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(value,object){
var thisis = $(this);
var reviewid = $(this).attr(‘data-reviewid’);
$.ajax({
url: “updateapprovalDB.php”,
type: “POST”,
data: {‘action’:’ <?php echo $reviewID ?> ‘},
success: function(result){
//$(“#div1”).html(result);
$(“#”+reviewid).html(‘publish’);
console.log(‘true’);
thisis.remove();
thisis.hide();
console.log(‘fff’);
}
});
});
});
</script>
<?php
}
echo “<br>”;
}
}
?>
Below is my plugin page for approving reviews.

[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-05-03/1525313237-691538-screenshot.png]

Also in #JavaScript _↴