Populating divs with MySQL data, matching row to a numbered ID
You are actually wasting the server resources by getting complete table data where you actually required one book data to display. Make your post request after the click even triggered. Transfer the "number" data to the server and get the corresponding row data from the table, then display.
$(document).ready(function() { $(document).on('click', '.book', function(){ var number = $(this).attr('id'); $.post("book_db.php", {result: number}, function(server_data) { data = JSON.parse(server_data); $("#title").html(data[number]['title']); $("#booknumber").html(data[number]['booknumber']); $("#author").html(data[number]['author']); $("#publisher").html(data[number]['publisher']); }); });}); You have to rewrite your server code according to this.Also, try to dynamically create these html elements
<div class="index-wrapper"> <div class="book" id="123">Book title</div> <div class="book" id="124">Book title</div> <div class="book" id="125">Book title</div> <div class="book" id="127">Book title</div> <div class="book" id="128">Book title</div> <div class="book" id="130">Book title</div> </div>PHP
?php$hostname = "localhost";$username = "***";$password = "***";$databaseName = "book_db";$connect = mysqli_connect($hostname, $username, $password, $databaseName);$dataRow = array();if(isset($_POST['result'])) {$post = $_POST['result'];$sql = "SELECT * FROM booknumber WHERE booknumber=".$post;$result = $connect->query($sql);while($row = $result->fetch_assoc()){ $dataRow[] = $row;} }echo json_encode($dataRow);?>