title: jQuery slideToggle class with dynamically created id
body: <p>I am trying to hide / show comment replies.</p>
  <p>I tried a few methods but couldn't get class with dynamic <code>ids</code>.</p>
  <p>My html structure is like this :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="display-comments"&gt;  
      &lt;div class="form-group border-bottom" id="comment-1"&gt;
          //level - 1
          &lt;button type="button" class="btn btn-primary btn-xs show_reply"&gt;show replies&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="form-group border-bottom parentOF-1" id="comment-2"&gt;
          //level-2 parentOF-1
          &lt;button type="button" class="btn btn-primary btn-xs show_reply"&gt;show replies&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="form-group border-bottom parentOF-2" id="comment-3"&gt;
          //level-3 parentOF-2
      &lt;/div&gt;
      &lt;div class="form-group border-bottom" id="comment-4"&gt;
          //level-4 doesnt have child
          
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I tried like in the following example with different variations.</p>
  <pre><code>$(document).on('click', '.show_reply', function(e) {
    e.preventDefault();
    var commet-id = $('comment-').val();
    var parentOF = $('parentOF-').val();
  
    $(this).text() == &quot;show replies&quot; ? $(this).text(&quot;show replies&quot;) : $(this).text(&quot;hide replies&quot;);
    $(this).closest('parentOF-').nextUntil('parentOF-').slideToggle(); 
  });
  </code></pre>
  <p>But couldn't make it work. Thanks for any help.</p>