Jquery mouse over event - php

Question

I want to show a hidden div when I mouse over a link on my table cell. The event only fires up on the first row. This is what i did:
$(document).ready(function(){
$("#show_div").mouseover(function() {
$("#hello").css('visibility', 'visible');
});
$("#hello").mouseover(function() {
$("#hello").css('visibility', 'visible');
});
$("#hello").mouseout(function() {
$("#hello").css('visibility', 'hidden');
});
});
<form action="" method="post">
<table class="table table-bordered table-hover">
<div id="bulkOptionContainer" class="col-xs-4">
<select class="form-control" name="bulk_options" id="">
<option value="">Select Option</option>
<option value="publish">Publish</option>
<option value="draft">Draft</option>
<option value="delete">Delete</option>
</select>
</div>
<div class="col-xs-4">
<input class="btn btn-success" type="submit" name="submit" value="Apply"/>
<a class="btn btn-primary" href="posts.php?source=add_post">Add New</a>
</div>
<thead>
<tr>
<th><input type="checkbox" name="checkbox[]" id="selectAllCheckBoxes"></th>
<th>Id</th>
<th>Author</th>
<th scope="col">Title</th>
<th>Category</th>
<th>Status</th>
<th>Image</th>
<th>Tags</th>
<th>Comments</th>
<th>Date</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php $query = "SELECT * FROM post ORDER BY post_id DESC";
$result_set = mysqli_query($link, $query);
confirm_query($result_set);
while ($row = mysqli_fetch_assoc($result_set)):?>
<tr>
<td><label><input type="checkbox" class="checkBoxes" name="checkBoxArray[]"
value="<?php echo $row['post_id']; ?>"></label></td>
<td><?php echo $row['post_id'] ?></td>
<td><?php echo $row['post_author'] ?></td>
<td width="100%">
<!-- link to over-->
<a id="show_div"
href="../post.php?p_id=<?php echo $row['post_id'] ?>"><?php echo $row['post_title'] ?></a>
<!-- div to become visible on hover-->
<div id="hello" style="visibility:hidden;">
<p>post</p>
</div>
</td>
<td><?php echo sel_cat_byId($row['post_category_id']) ?></td>
<td><?php echo $row['post_status'] ?></td>
<td><img width="100" class="img-responsive" src="../images/<?php echo $row['post_image'] ?>"></td>
<td><?php echo $row['post_tag'] ?></td>
<td><?php echo $row['post_comment_count']; ?></td>
<td><?php echo $row['post_date'] ?></td>
<td><a class="btn btn-danger" href="posts.php?delete=<?php echo $row['post_id']; ?> "
onclick="alert('Are You Sure?')">Delete</a></td>
</td>
<td><a class="btn btn-success" href="posts.php?source=edit_post&edit=<?php echo $row['post_id']; ?>">Edit</a>
</td>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</form>
****the event only fires up on the first row.
Thanks

Answer 1

First replace your id with class and then try this
$(".show_div").mouseover(function() {
$(this).next(".hello").css('visibility', 'visible');
});
$(".show_div").mouseout(function() {
$(this).next(".hello").css('visibility', 'hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="show_div"
href="#">abc</a>
<!-- div to become visible on hover-->
<div class="hello" style="visibility:hidden;">
<p>post</p>
</div>