JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<ul>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
    <li>
        <div class="first">Квадратное поле</div>
        <div class="second" style="display:none">Поле с кнопочками и текстбоксом</div>
    </li>
</ul>

JavaScript

jQuery(function ($) {
    $('ul').on('click','li',function (e) {                
        if ($(e.target).hasClass('second')) return false;
        $(this).find('.second').toggle();
    });
});