How to use JavaScript/jQuery "this" keyword to toggle rows

Question

I have a form that will post data to a table and will separate the data into two rows, a row-header and a row-body (similar to bootstrap accordion card-header and card-body). Initially, whenever I click on a button it toggles both row-bodies. Now, it's now only toggling the first row body.

How do you use the this keyword so that when I click on button1 on row-header1 , it toggles row-body1 , and button2 on row-header2 toggles row-body2 ?

This is the code I'm actually working with, but it contains ejs:

<table class="table table-hover table-sm">
<thead>
  <tr>
    <th><i class="fas fa-cart-plus"></i></th>
    <th>Deadline</th>
    <th>Award</th>
    <th>Fee</th>
    <th>#Copies</th>
    <th>Genre</th>
    <th>More Info</th>
  </tr>
</thead>

<tbody>
  <!--Row header-->
  <tr id="table-header">
    <% awards.forEach(function(award){ %>
    <td><input type="checkbox" name="" value=""/></td>
    <td><%= award.deadline %></td>
    <td><%= award.awdname %></td>
    <td>$<%= award.fee %></td>
    <td><%= award.copies %></td>
    <td><%= award.genre %></td>
    <td><button id="moreInfo">Click Me</i></button></td>

  <!--Row body    -->
  <tr id="table-body">
    <td colspan="7">
      <div class="showContent hide"><label for="">Description:</label> <%= award.desc %></div>
      <div class="showContent hide"><label for="">Sponsored by:</label> <%= award.sponsor %></div>
      <div class="showContent hide"><label for="">Prize: $</label><%= award.prize %></div>
      <div class="showContent hide"><label for="">Shipping status:</label> <%= award.postorarrive %></div>
      <div class="showContent hide"><label for="">Website:</label> <%= award.url %></div>
    </td>
  </tr>
  <tr><% }); %></tr>               
</tbody>
</table>

SCRIPT

$("#table-body").hide();

$("#moreInfo").on("click", function() {
    $("#table-body").toggle();
});

See my JSFiddle for a modified version of the above code but without ejs.

I've spent days looking at similar questions and trying to adapt the given answers to my scenario but with no success.

Answer 1

You should not use id as a selector for multiple buttons, because every element, in order to be properly selected by id should be unique, and thus selected one by one. For common functionality, when multiple similar elements to be selected class should be used instead.

<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead> 
    <tbody>
        <!--Row header-->
        <tr>
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description1:</label></div>  
            </td>
        </tr> 
        <tr>
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description2:</label></div>  
            </td>
        </tr> 
    </tbody>
</table>

$(".table-body").hide();
$(".moreInfo").on("click", function(){
    $(this).parent().parent().next().toggle();
});

https://jsfiddle.net/kaxocr7h/1/

Answer 2

 $(".table-body").hide(); $(document).on("click", ".moreInfo", function(){ $(this).parent().parent().next().toggle(); });

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap docs: https://getbootstrap.com/docs --> <table class="table table-hover table-sm"> <thead> <tr> <td>Row#</td> <th><i class="fas fa-cart-plus"></i></th> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Details</th> </tr> </thead> <tbody> <!--Row header--> <tr id="table-header"> <td>1</td> <td><input type="checkbox" name="" value=""/></td> <td>Row1 Content1</td> <td>R1C2</td> <td>R1C3</td> <td><button id="moreInfo" class="moreInfo">Click Me</button></td> </tr> <!--Row body --> <tr id="table-body" class="table-body"> <td colspan="7" class="hiddenRow"> <div class="showContent hide"><label for="">Description1:</label></div> </td> </tr> <tr id="table-header"> <td>2</td> <td><input type="checkbox" name="" value=""/></td> <td>Row2 Content1</td> <td>R2C2</td> <td>R2C3</td> <td><button id="moreInfo" class="moreInfo">Click Me</button></td> </tr> <!--Row body --> <tr id="table-body" class="table-body"> <td colspan="7" class="hiddenRow"> <div class="showContent hide"><label for="">Description2:</label></div> </td> </tr> </tbody> </table>

Add a class for moreInfo button and the table row that have to be toggled

    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <td>Row#</td>
                <th><i class="fas fa-cart-plus"></i></th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Details</th>
            </tr>
        </thead>

        <tbody>
            <!--Row header-->
            <tr id="table-header">
                <td>1</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row1 Content1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
            </tr>

            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description1:</label></div>  
                </td>
            </tr>

            <tr id="table-header">
                <td>2</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row2 Content1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
            </tr>


            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description2:</label></div>  
                </td>
            </tr>

        </tbody>
    </table>






    $(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

Answer 3

id should be unique, Look into below code with class selector.

 $(document).ready(function() { $(".table-body").hide(); $(".moreInfo").on("click", function() { $(this).closest('tr').next(".table-body").toggle(); }); });

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover table-sm"> <thead> <tr> <td>Row#</td> <th><i class="fas fa-cart-plus"></i></th> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Details</th> </tr> </thead> <tbody> <!--Row header--> <tr id="table-header"> <td>1</td> <td><input type="checkbox" name="" value="" /></td> <td>Row1 Content1</td> <td>R1C2</td> <td>R1C3</td> <td><button class="moreInfo">Click Me</button></td> </tr> <!--Row body --> <tr class="table-body"> <td colspan="7" class="hiddenRow"> <div class="showContent hide"><label for="">Description1:</label></div> </td> </tr> <tr id="table-header"> <td>2</td> <td><input type="checkbox" name="" value="" /></td> <td>Row2 Content1</td> <td>R2C2</td> <td>R2C3</td> <td><button class="moreInfo">Click Me</button></td> </tr> <!--Row body --> <tr class="table-body"> <td colspan="7" class="hiddenRow"> <div class="showContent hide"><label for="">Description2:</label></div> </td> </tr> </tbody> </table>