JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left" id="dumdiv">
    <ul id="nav">
        <li class="seperate">
            <img class="menu_icon" src="images/clock.png" align='left'><a class="first" id='im1'><img src="images/insert.GIF" id="1" align='right'>Menu 1</a>

            <ul class='count'>
                <li class="seperate1"><a href="#submenu1" onclick="showPane('submenu1')">Sub-Menu 1</a>
                </li>
                <li class="seperate1"><a href="#submenu2" onclick="showPane('submenu2')">Sub-Menu 2</a>
                </li>
                <li class="seperate1"><a href="#submenu3" onclick="showPane('submenu3')">Sub-Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="seperate">
            <img class="menu_icon" src="images/clock.png" align='left'><a id='im2'><img src="images/insert.GIF" id="2" align='right'>Menu 2</a>

            <ul class='count'>
                <li><a>Sub-Menu 1</a>
                </li>
                <li><a>Sub-Menu 2</a>
                </li>
                <li><a>Sub-Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="seperate">
            <img class="menu_icon" src="images/clock.png" align='left'><a id='im3'><img src="images/insert.GIF" id="3" align='right'>Menu 3</a>

            <ul class='count'>
                <li><a>Sub-Menu 1</a>
                </li>
                <li><a>Sub-Menu 2</a>
                </li>
                <li><a>Sub-Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="seperate">
            <img class="menu_icon" src="images/clock.png" align='left'><a id='im4'><img src="images/insert.GIF" id="4" align='right'>Menu 4</a>

            <ul class='count'>
                <li><a>Sub-Menu 1</a>
                </li>
                <li><a>Sub-Menu 2</a>
                </li>
                <li><a>Sub-Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="seperate">
            <img class="menu_icon"...

CSS

.left {
    width:210px;
    height:auto;
    text-align:justify;
    background-color:#eaeaea;
    box-shadow:2px 0 2px #cccccc;
    float:left;
}
ul#nav, ul#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
ul#nav a {
    display: block;
    text-decoration: none;
    cursor:pointer;
}
ul#nav li {
    margin-top: 1px;
}
ul#nav li.seperate a {
    background: #2d539a;
    color: #fff;
    padding: 0.5em;
    padding-left:60px;
    height: 22px;
    font-size:14px;
    vertical-align: middle;
}
ul#nav li a:hover {
    background: #022464!important;
    cursor:pointer;
}
ul#nav li.seperate ul li[class*="current"] > a {
    color: #75a9fd;
}
ul#nav li.seperate ul li a {
    background: #b2cdff;
    color: #000;
    padding-left: 60px;
    cursor:pointer;
}
ul#nav li.seperate ul li a:hover {
    background: #7aa4f3!important;
    padding-left: 60px;
    cursor:pointer;
}
#nav ul {
    padding: 1px;
    display: none;
}
.menu_icon {
    margin-top:3%;
    margin-left:10%;
}
.active {
    color:#95a7f0;
    font-size:24px;
}
.inactive {
    color:#95a7f0;
    font-size:18px;
}
.sample {
    display:block;
}
.selected {
    background: #7aa4f3!important;
    padding-left: 60px;
    cursor:pointer;
}
.deselect {
    background: #b2cdff;
    color: #000;
    padding-left: 60px;
    cursor:pointer;
}
.selected_menu {
    background-color:#506ad3;
    color:#ffffff;
}

JavaScript

$(document).ready(function () {
    /*click function starts here*/
    $('#nav li a').click(function () {
        var sds = document.getElementById("dum");
        if (sds == null) {;
        }
        var sdss = document.getElementById("dumdiv");
        if (sdss == null) {



        }
        if (sdss != null) {
            var s = $(this).attr('id');
            var imgid = $("#" + s + " img").attr('id');
            var imgsrc = $("#" + imgid + "").attr('src');
            if (imgsrc == "images/insert.GIF") {
                $("#" + imgid + "").attr('src', 'images/remove.GIF');
                $('.count').slideUp(400);
                $(this).next().slideDown(400);
                $("#" + s + "").css("background-color", "#142878");
            } else {
                $("#" + imgid + "").attr('src', 'images/insert.GIF');
                $(this).next().slideUp(400);
                $("#" + s + "").css("background-color", "#2d539a");
            }
        }
    });

    $("#nav ul li a:eq(0)").bind('click', function (e) {
        e.preventDefault();
        $("#nav ul li a").removeClass('selected')
        $(this).addClass('selected');




    });

    $(".first").click(function () {
        var $this = $(this);
        if ($this.hasClass("clicked-once")) {
            // already been clicked once, refresh the page
            $this.removeClass("clicked-once");
        } else {
            // first time this is clicked, mark it
            $this.addClass("clicked-once");
        }
    });

});