Menu
So I’m trying to implement a like button for users’ posts. I’ve got the button working so that when clicked, the number of likes goes up by one, and the like button image changes with ajax. The problem is that the like button only works for ‘one’ post on index.php instead of working for every post. How can I fix my code so that each like button on each different post (when clicked) works properly? Like I said, the first post works properly, but the others don’t. Here is the code :
[CODE]<!doctype html>
<head>
<?php
include(‘header.php’);
?>
<script>
$(document).ready(function(){
$(“#img_like”).click(function(){
$.ajax({url:”liked_button.php”,success:function(result){
$(“#like_system”).html(result);
}});
});
});
</script>
<script>
function increase(){
var total_likes = document.getElementById(“like_total”);
total_likes.value++;
}
</script>
</head>
<link type=”text/css” rel=”stylesheet” href=”index.css”>
<body>
<?php
$conn = mysqli_connect(“localhost”,”root”,””) or die (“No SQLI”);
mysqli_select_db($conn, “sample”) or die (“No DB”);
$sqli = “SELECT * FROM `photos` ORDER BY `id` DESC”;
$result = mysqli_query($conn, $sqli) or die (“No query”);
while($row = mysqli_fetch_assoc($result))
{
$username = $row[‘username’];
$title = $row[‘title’];
$description = $row[‘description’];
$image_name = $row[‘image_name’];
$image_id = $row[‘image_id’];
$random_directory = $row[‘random_direc’];
$date = $row[‘post_date’];
$image_info = “http://localhost/splindr_2.0/photos/$random_directory/$image_id”;
echo “<div id=contentWrapper’>
<div id=’photo’>
<div id=’actual_image’>
<img src=’$image_info’>
</div>
<div id=’like_system’><img id=’img_like’ onClick=’increase()’ src=’https://i.imgur.com/pprs4Ch.jpg’></div>
<input type=’text’ name=’like_total’ id=’like_total’ value=’0′>
<div id=’info_wrapper’>
<div id=’info_header’>Title: $title   By: $username   Date: $date</div>
<div id=’description’>$description</div>
</div>
</div>
</div>”;//end contentWrapper
}
?>
</body>
</html>