JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div> <a href="#">
                                    <i class="fa fa-home fa-fw"></i>
                                    <span>Home</span>
                                </a>

        </li>
        <li> <a href="#">
                                    <i class="fa fa-signal"></i>
                                    <span>Charts</span>
                                </a>

        </li>
        <li> <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
                                    <i class="fa fa-group"></i>Asset</span>


                                </a>

            <ul class="children nav-child unstyled small collapse" id="sub-item-1">
                <li class="item-2 deeper parent active">
                    <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                        <i class="fa fa-frown-o"></i>
                                         </span>pending</li>
                    <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                        <i class="fa fa-plus"></i> </i>
                                         </span>ADD</li>
                    <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                        <i class="fa fa-stack-exchange"></i>
                                         </span>Stock</li>
                    <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                      <i class="fa fa-bullseye"></i>
                                         </span>View all</li>
                </li>
            </ul>
        </li>
        <li> <a class="" href="#">
                            ...

JavaScript

$(document).ready(function () {
    $('#sidebar-nav ul').on('click', 'li', function () {
        $(this).append('<div class="pointer"> <div class="arrow"></div>Working Right? <div class="arrow_border"></div>');
    });
});