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" src="images/clock.png" align='left'><a id='im5'><img src="images/insert.GIF" id="5" align='right'>Menu 5</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>
  ...

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');
    $('a').next().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() {
				$("#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
    location.reload();
}
else {
    // first time this is clicked, mark it
    $this.addClass("clicked-once");
}
});
           
        });