JSFiddle - React, Tailwind, and code Playground

by shubh0602

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>

JavaScript

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