javascript - Toggle show/hide div with button for multiple result -

i developing classroom students attendance site, doing , expected php coding, working fine... when update attendance each student click on each student thumbnails students list page, working...

my question had added add description button each students on thumbnails, invisible, when user hover mouse on student thumbnails show button, had added toggle show/hide div button, when user click visible button small form div display...

this used toggle show/hide div button...

html

<div id='content'>form content here</div> <input type='button' id='hideshow' value='add description'> 

jquery

jquery(document).ready(function(){     jquery('#hideshow').live('click', function(event) {                  jquery('#content').toggle('show');     }); }); 

its working when click add description button, problem if have more 2 or above students list when click button students form content div display now, need 1 student div display, mean student above button click, display... think problem because of used unique id, how fix it.? idea.???

edit php generated students list display

<?php if ($students) { ?>         <?php foreach ($students $student) { ?>             <div class="student">         <div class="thumb">         <div class="content" style="display:none;">             div content here         </div>         <input type='button' id='hideshow' value='add description'>             <img class="img" src="<?php echo $student['image']; ?>" alt="<?php echo $student['name']; ?>" />         </div>             <div class="name"><?php echo $student['name']; ?><?php echo $student['student_id']; ?></div>          </div>        <?php } else { ?>     <div class="empty"><?php echo $text_empty; ?></div>     <?php } ?> <?php } ?> 

this screenshot got now...

this looking

thanks...

i think understand problem. try using prev() previous sibling , use class="content" not id there multiple.

also .live() has been deprecated, prefer .on() since .live() removed in v1.9.

js

jquery(document).ready(function(){     jquery('#hideshow').on('click', function(event) {                  jquery(this).prev('.content').toggle('show');     }); }); 

html

<div class='content'>form content here</div> <input type='button' id='hideshow' value='add description'> 

update

now include php understand problem. issue you're using id hideshow, ids supposed unique , believe jquery stops checking if there more one. try this:

html

<div class='content'>form content here</div> <input type='button' class='hideshow' value='add description'> 

js

jquery(document).ready(function(){     jquery('.hideshow').on('click', function(event) {                  jquery(this).prev('.content').toggle();     }); }); 

so differences original answer it's not using class .hideshow, not id, , we're calling .toggle() show/hide instead of using css class .show.