apply jquery slidetoggle to results coming from a while in php - php

Question

The following piece of code in php, uses a while statement to output variable $the_job_id. For each of the output I want to apply jquery slidetoggle. The problem is that in my code slidetoggle works only for the first output of my while. Not working for the rest. Any idea how i should modify my code in order slidetoggle to work for each of my while outputs?
This is my php code:
<?php
$result = mysql_query("select * from `user_job` where `job_id` IN ($all_saved_job_id) ");
while($run_job = mysql_fetch_array($result)){
$the_job_id = $run_job['job_id'];
echo"<div id='flip'> PRESS TO SLIDE </div>";
echo" <div id='panel'> $the_job_id </div>";
}// end while
?>
this is my script :
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
this is my css :
<style>
#flip{
cursor:pointer;
margin-left:100px;
}
#panel{
padding:0px;
display:none;
}
</style>

Answer 1

id must be unique, otherwise you'll always get the first element in the page with duplicated id, so you need to use class instead:
echo"<div class='flip'> PRESS TO SLIDE </div>";
echo" <div class='panel'> $the_job_id </div>";
then you can use . to target elements by class name:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().slideToggle("slow");
});
});
Please note that you also need to change your CSS selector using . instead of # accordingly.