javascript - hide/show tbody of dynamically created tables on click at thead -

as can see after run code, have multiple tables, let assume dynamically created php. try hide/show entire tbody of table if click @ it's thead.

i give each table it's own id , write jquery code each table... since tables dynamically created, can't solve this.

the current version of jquery script toggles tbody's if click on thead, instead of thead of table clicked.

my idea solve create jquery code dynamically (but im not sure if work), before try this, know if there easier solution?

i thought this:

$("this tbody").css("display","none"); 

so selects tbody of thead clicked on.

var main = function()  {      $toggle = true;          $("thead").click      (          function()          {              if ($toggle)              {                  $toggle = false;                  $("tbody").css("display","none");              }              else              {                  $toggle = true;                  $("tbody").css("display","");              }          }      );    }  $(document).ready(main);

table, td {    border: 1px solid black;  }    td {    color: red;    display: block;    max-width: 120px;    white-space: nowrap;    overflow-x: auto;    background-color: blue;  }    th {      border: 1px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>   <thead>       <tr><th id="here1">first table</th></tr>   </thead>   <tbody>      <tr><td>a</td></tr>      <tr><td>b</td></tr>      <tr><td>c</td></tr>  </tbody>  </table>    <table>   <thead>       <tr><th id="here1">second table</th></tr>   </thead>   <tbody>      <tr><td>a</td></tr>      <tr><td>b</td></tr>      <tr><td>c</td></tr>  </tbody>  </table>

first, instead of using $('tbody'), use this

second, instead of managing variables visibility, use toggle function

var main = function() {    $("thead").on("click", function() {      $(this).parents("table").find("tbody").toggle();    });    }  $(document).ready(main);

table,  td {    border: 1px solid black;  }  td {    color: red;    display: block;    max-width: 120px;    white-space: nowrap;    overflow-x: auto;    background-color: blue;  }  th {    border: 1px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>    <thead>      <tr>        <th id="here1">first table</th>      </tr>    </thead>    <tbody>      <tr>        <td>a</td>      </tr>      <tr>        <td>b</td>      </tr>      <tr>        <td>c</td>      </tr>    </tbody>  </table>    <table>    <thead>      <tr>        <th id="here1">second table</th>      </tr>    </thead>    <tbody>      <tr>        <td>a</td>      </tr>      <tr>        <td>b</td>      </tr>      <tr>        <td>c</td>      </tr>    </tbody>  </table>