Q:

Append to closest div class (multiple divs with same class on page)

I'm trying to append content into the closest div class with name ".infoCatcher", but as of now it is appending to all divs with that class on the page.
How do I append this to the closest div?
I have this:
$(document).on('click', '.btnMoreInfo', function () {
    $('.item').closest('div').find('.infoCatcher').append('<div class="moreInfo info">' + '</div>');
});

And HTML:
<ul>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
    <li>
        <button class='btnMoreInfo'>More</button>
        <div class='infoCatcher'></div>
    </li>
</ul>

Thankful for help!

A:

Try .siblings. Converted your code to fiddle. Working version is here
$(document).ready(function(){
   $(document).on('click', '.btnMoreInfo', function (e) {
       alert('Yes');
       $(e.target).siblings(".infoCatcher").append('<div class="moreInfo info">More Content..' + '</div>');
   });
});

