I have a page that prints out rows from a mysql table. I'm trying to create an ajax form that allows users to delete rows but for some reason I can only seem to get it to delete the very top row that is printed out. I've only included the script that might be needed here and left out the database query(which works fine).Firebug only shows my form being posted when I click the top row of results, any other rows it does nothing. Can anyone tell me what's wrong? Thanks
My_reviews.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
//Delete Review
$(document).ready(function(){
$("#deleteReview").click(function (e) {
e.preventDefault();
var username=$("#username").val();
var film_id=$("#film_id").val();
var id=$("#id").val();
$.post('ajax_deleteReview.php', {username: username, film_id: film_id, id: id},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
return false;
});
});
</script>
</head>
<div class="container">
<div id="message"></div>
<?php
$sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc";
$result = $db_conx->query($sql);
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$film_id = $row['film_id'];
$review = $row['review'];
$movie = $tmdb->getMovie ($film_id);
echo '
<div class="row">
<div class="col-md-1">
<a href="film_info.php?film_id='. $movie->getID() .'"><img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" /></a>
<p>
</p>
</div>
<div class="col-md-4">
<h3>
' . $movie->getTitle() .'
</h3>';
echo'
<p>
'.$review. '
</p>
<form>
<input type="hidden" id="username" name="username" value="'. $username.'">
<input type="hidden" id="film_id" name="film_id" value="'.$film_id .'">
<input type="hidden" id="id" name="id" value="'.$id .'">
<button type="submit" id="deleteReview" class="btn btn-danger btn-xs pull-right">delete</button>
</form>
</div>
<div class="col-md-7">
</div>
</div>';
}
?>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
</script>
</div>
</body>
</html>
ajax_deleteReview.php
<?php
//include db configuration file
include_once("ajax_review/config.php");
//Configure and Connect to the Databse
$username=$_POST['username'];
$film_id=$_POST['film_id'];
$id=$_POST['id'];
//Delete Data from Database
$delete_row = $mysqli->query("DELETE * FROM `user_reviews` WHERE id='$id' AND username='$username' AND film_id='$film_id' LIMIT 1");
if($delete_row){
echo '<img src="images/tick_large.png"/>';
}
else{ echo "An error occurred!"; }
?>