jquery - 最も近い div クラスに追加 (ページ上に同じクラスを持つ複数の div)

Question

name の最も近い div クラスにコンテンツを追加しようとしています".infoCatcher"が、現時点では、ページ上のそのクラスを持つすべての div に追加しています。

これを最も近い div に追加するにはどうすればよいですか?

私はこれを持っています：

$(document).on('click', '.btnMoreInfo', function () {
    $('.item').closest('div').find('.infoCatcher').append('<div class="moreInfo info">' + '</div>');
});

そして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>

助けてくれてありがとう！