unable to hide and show a particular table row with the same id names inside a div using jquery

Question

I am creating a website and there are some pages containing the <div> tags as the wrapper of <table> . A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id . Below is my example html for the better explanation.

HTML

<div class='static_archive'>   // First Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

<div class='static_archive'>  // Second Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

jQuery

$(document).ready(function(){

     $("#form_container").hide();

     $("#show_hide_details").click(function(){

          $("#form_container").toggle();

     });      
});   

As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form> . By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.

I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?

With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.

Here is the jsfiddle with my code structure jsfiddle

Every clicked hide/show should effects the respective form.

I have edited my post. Please have a look now.

Answer 1

You can use $(this) to do the toggle with particular block.

$(this).closest('tr').next("#form_container").toggle();

You should not use same id for multiple elements , assign class and use that

$(this).closest('tr').next(".form_container").toggle();

Answer 2

I think u want this or may this help u.

You can not have same id's for different controls.So u can have id's staring with same string

You can use ^ here:

$(document).ready(function(){
     $("[id^='form_container']").hide();
     $("#show_hide_details").click(function(){
           $(this).parents().next("tr").toggle();
     });      
});   

jsfiddle

Answer 3

I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.

$(document).ready(function(){
    $(".form_container").hide();


     $(".show_hide_details").click(function(){

         $(this).parents("tr").next().toggle();

     });      
});