title: Toggle show/hide of divs in a foreach loop using Jquery and PHP
body: <p>Having a bit of an issue with show/hide or toggle with it comes to php foreach loops.</p>
  
  <p>My php look like this:</p>
  
  <pre><code>&lt;?php
  $keys = $personArray;
  
  foreach($keys as $key){
  
  $key = get_field_object($key);
  $key_NAME   = $key['name'];
  $key_NAME2  = $key['name2'];
  $key_TYPE   = $key['type'];
  
  
  echo '&lt;div style="display:block;margin-botton:4px;"&gt;';
  echo '&lt;span id="kname" class="hide"&gt;' . $key_NAME . '&lt;/span&gt;&lt;span id="kname2" class="hide"' . $key_NAME2 . '&lt;/span&gt;';
  echo ' | ';
  echo '&lt;span id="ktype" class="hide"&gt;' . $key_TYPE . '&lt;/span&gt;';
  echo '&lt;/div&gt;';
  
  }
  
  
  //I will get;
  /*
  JamesJack | Artist
  SamMike | Singer
  CurtTrisha | Dancer
  */
  ?&gt;
  </code></pre>
  
  <p>But I need to have jQuery with checkboxes show/hide key_TYPE and toggle between key_NAME and key_NAME2</p>
  
  <p>How can I do this right? My current code only effect the first line of results.</p>
  
  <p>Here is the rest of the code:</p>
  
  <pre><code>&lt;style&gt;
  
  .hide{display:none;}
  
  &lt;/style&gt;
  
  &lt;script&gt;
  jQuery(document).ready(function($){
      $('input[type="checkbox"]').click(function(){
          if($(this).attr("value")=="changename"){
              $("#kname").toggle();
          }else{
              $("#kname2").toggle();
          }
          if($(this).attr("value")=="hidetype"){
              $("#ktype").toggle();
          }
  
      });
  });
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;label&gt;&lt;input type="checkbox" name="vauChange" value="changename"&gt; Toggle name&lt;/label&gt;
  &lt;label&gt;&lt;input type="checkbox" name="vauChange" value="hidetitle"&gt; Hide Title&lt;/label&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My code isn't working right.</p>