JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id01" class="app">
        <a href="#">
            <span>01</span>
        </a>
        <div class="dropdownwrap">Clicked On ID:  </div>
    </div>
    <div id="id02" class="app">
        <a href="#">
            <span>02</span>
        </a>
    </div>
    <div id="id03" class="app">
        <a href="#">
            <span>03</span>
        </a>
    </div>
    <div id="id04" class="app">
        <a href="#">
            <span>04</span>
        </a>
    </div>
    <div id="id05" class="app">
        <a href="#">
            <span>05</span>
        </a>
    </div>
    <div id="id06" class="app">
        <a href="#">
            <span>06</span>
        </a>
    </div>
    <div id="id07" class="app">
        <a href="#">
            <span>07</span>
        </a>
    </div>
    <div id="id08" class="app">
        <a href="#">
            <span>08</span>
        </a>
    </div>
    <div id="id09" class="app">
        <a href="#">
            <span>09</span>
        </a>
    </div>
    <div id="id10" class="app">
        <a href="#">
            <span>10</span>
        </a>
    </div>
    <div id="id11" class="app">
        <a href="#">
            <span>11</span>
        </a>
    </div>
    <div id="id12" class="app">
        <a href="#">
            <span>12</span>
        </a>
    </div>
    <div id="id13" class="app">
        <a href="#">
            <span>13</span>
        </a>
    </div>
    <div id="id14" class="app">
        <a href="#">
            <span>14</span>
        </a>
    </div>
    <div id="id15" class="app">
        <a href="#">
            <span>15</span>
        </a>
    </div>
    <div id="id16" class="app">
        <a href="#">
            <span>16</span>
        </a>
    </div>
    <div id="id17" class="app">
        <a href="#">
            <span>17</span>
        </a>
    </div>
    <div id="id18" class="app">
        <a href="#">
            <span>18</span>
        </a>
    </div>
    <div id="id19" class="app">
        <a href="#">
 ...

CSS

.app {
            float: left;
            width: 100px;
            padding: 5px;
            font-weight: 300;
            font-size: 14px;
            white-space: nowrap;
            position: relative;
            text-align: center;
        }

            .app a {
                display: block;
                text-decoration: none;
            }

                .app a span {
                    display: block;
                    width: 100%;
                    height: 100px;
                    background-color: lightslategray;
                    color: white;
                    line-height: 100px;
                    text-align: center;
                    font-size: 30px;
                }
.app.active a span{
                        background-color: lightsalmon;
    
}

        /*.app img {
                max-width: 121px;
                width: 100%;
            }*/

        .dropdownwrap {
            clear: both;
            margin: 0px 5px 20px 5px;
            background-color: #434343;
            height: 0px;
            transition: height 300ms;
            
        }

JavaScript

$('.app').on('click', function (evt) {
                evt.preventDefault();

                if ($(this).hasClass("active")) {
                    $(".app.active").removeClass("active");
                    $(".dropdownwrap").remove();
                    return false;
                }
                $(".app.active").removeClass("active");

                var clickedElement = $(this);
                clickedElement.addClass("active");
                var dropDownAppended = false;
                 var t = 0;


                $(this).nextAll(".app").each(function () {
                    var offset = $(this).offset().top;
                    if (offset > (clickedElement.offset().top + 10)) {
                        $(".dropdownwrap").remove();
                        $(this).before('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").css('height', '100px');
                        dropDownAppended = true;
                        return false;
                    }

                });

                if (!dropDownAppended) {
                    var itemsAfter = $(this).nextAll(".app").length;
                    console.log(itemsAfter);
                    if (itemsAfter) {
                        $(".dropdownwrap").remove();
                        $(this).nextAll(".app").last().after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").slideDown();
                        dropDownAppended = true;
                        return false;
                    }
                    else {
                        $(".dropdownwrap").remove();
                        $(this).after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").slideDown();
                        dropDownAppended = true;
                        return false;
               ...