title: Append to closest div class (multiple divs with same class on page)
body: <p>I'm trying to append content into the closest div class with name <code>".infoCatcher"</code>, but as of now it is appending to all divs with that class on the page.</p>
  
  <p>How do I append this to the closest div?</p>
  
  <p>I have this:</p>
  
  <pre><code>$(document).on('click', '.btnMoreInfo', function () {
      $('.item').closest('div').find('.infoCatcher').append('&lt;div class="moreInfo info"&gt;' + '&lt;/div&gt;');
  });
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;button class='btnMoreInfo'&gt;More&lt;/button&gt;
          &lt;div class='infoCatcher'&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;button class='btnMoreInfo'&gt;More&lt;/button&gt;
          &lt;div class='infoCatcher'&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;button class='btnMoreInfo'&gt;More&lt;/button&gt;
          &lt;div class='infoCatcher'&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;button class='btnMoreInfo'&gt;More&lt;/button&gt;
          &lt;div class='infoCatcher'&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;button class='btnMoreInfo'&gt;More&lt;/button&gt;
          &lt;div class='infoCatcher'&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thankful for help!</p>