title: Show and hide an element with dynamic IDs on jQuery
body: <p>I have several checkboxes on a Wordpress page with an id of the following format</p>
  
  <p><code>id = 'more-talktime-{{post.id}}</code> where the <code>post.id</code> is set dynamically.</p>
  
  <p>Then I have a div element with the id of <code>id = 'talktime-options-{{post.id}}'</code></p>
  
  <p>What I try to do is when clicking on the checkbox, it will show/hide the related div element. I tried it with this:</p>
  
  <pre><code>jQuery( function ( $ ) {
  
     jQuery(document).ready(function(){
          jQuery('[id^=more-talktime-]').change(function(){
              var id = this.id.split('-').pop();
                  if(this.checked)
                      jQuery('#talktime-options-' + id).fadeIn('slow');
                  else
                      jQuery('#talktime-options-' + id).fadeOut('slow');
          });
      });
  });
  </code></pre>
  
  <p>I confirmed that the <code>var id</code> is the right one. But the show/hide doesn't work and I don't have any error on the console.</p>
  
  <p>The div element has a <code>display: none</code> by default.</p>
  
  <p>Edit to add some HTML code too:</p>
  
  <pre><code>&lt;div class="col-md-6 add-on-service"&gt;
      &lt;h3&gt;More Talktime&lt;/h3&gt;
      &lt;input type="checkbox" name="more-talktime" id="more-talktime-{{post.id}}" class="add-on-service-checkbox"&gt;
      &lt;label for="more-talktime" class="add-on-service-description"&gt;blah blah blah&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="add-on-service talktime-options hidden-box" id="talktime-options-{{post-id}}"&gt;
      &lt;h3&gt;Choose Talktime Duration&lt;/h3&gt;
          ......
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Fixed</strong>
  I found the problem. The div element had a typo as you see on the HTML code and instead of {{post.id}} it was {{post-id}} with a dash. Such a silly mistake. But all of your comments and answers helped me dig more on it and find the issue.</p>