jquery .on() toggle div
<p>i'm developing a blog with dynamic content loaded via ajax request and i'm trying
to hide/show the "post comment" form, of the article, with a button : </p>

<pre><code>&lt;div id="post"&gt;
...
  &lt;ol id="update" class="timeline"&gt;
    &lt;!-- comments here --&gt;
  &lt;/ol&gt;
  &lt;button class="mybutton Bhome"&gt;Commenta&lt;/button&gt;&lt;!-- hide/show button --&gt;
  &lt;div class="mycomment"&gt;&lt;!-- div to hide/show --&gt;
    &lt;form action="#" method="post"&gt;
      Nome:
      &lt;input type="text" size="12" id="name" /&gt;&lt;br /&gt;
      Email:
      &lt;input type="text" size="12" id="email" /&gt;&lt;br /&gt;
      &lt;textarea rows="10" cols="50" class="mytext" id="commentArea"&gt;&lt;/textarea&gt;&lt;br /&gt;
      &lt;input type="submit" class="Bhome" value=" Post " /&gt;
    &lt;/form&gt;
  &lt;/div&gt;&lt;!-- mycomment --&gt; 
&lt;/div&gt;&lt;!-- post --&gt;  
</code></pre>

<p>This jquery code works well but has effect on All the posts...</p>

<pre><code>$("div").on("click", ".mybutton", function(e){ 
  $(".mycomment").slideToggle("slow");
  e.stopPropagation();
});
</code></pre>

<p>I want that only the clicked hide/show button has effect on the related article but f i have more than one article on my page the button with <code>.mybutton</code> class hides or shows all the comment form of all the articles.</p>
