JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://pfs.localhost:8080/include/js/pfs/PfsSelectList.js?v=0.79"></script>
<script src="http://pfs.localhost:8080/include/js/date.js?v=0.79"></script>
<script src="http://pfs.localhost:8080/include/js/cyp.js?v=0.79"></script>

<div id="sidebar">
                <div class="box">
                    <div class="box-top"><h2>Select Chart</h2></div>
                    <div class="box-main">
                        <ul class="pfs_selectList" id="chart_type"></ul>
                    </div>
                </div>
                <div class="box">
                    <div class="box-top"><h2>Select Accounts</h2></div>
		    <div class="box-main"><ul id="accounts_area" class="list"></ul></div>
                </div>
                <div class="box" id="timeframe_container">
                    <div class="box-top">
                        <h2>Select Timeframe</h2>
                        <div class="clear"></div>
                    </div>
                    <div class="box-main">
                        <ul class="pfs_selectList" id="timeframe"></ul>
                        <div style="padding:8px 10px; height: 15px; margin: -5px 0 5px; border-bottom: 1px dotted #b5b5b5;">or <a href="javascript:analysis_page.toggleDaterange();">select date range</a></div>
                        <div id="daterange" style="display:none">
                            From: <input type="text" id="from" name="from" size="8" readonly="readonly" value="01.09.2011"/><br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To: <input type="text" id="to" name="to" size="8" readonly="readonly" value="30.08.2013"/>
                            <br/><br/><a style="margin-left:25px" href="javascript:void(0);" class="custom-btn small blue" onClick="javascript:if($('#from').val()=='' || $('#to').val()==''){alert('Please enter From and To dates to view'); return...

JavaScript

var chart_title;
    var ss = [];
    //chart.labelClick(\''+data[i].id+'\');
    $(document).ready(function(){
        if (window.matchMedia && window.matchMedia('only screen and (max-width: 991px)').matches) {
            $('.box-top', '#sidebar').click(function(){
                $(this).parent().toggleClass('expanded').children('.box-main').slideToggle();
            });   
        }

        analysis_page.init();
        var tf = [{data: 'currentMonth', label: "This month"},
            {data: 'past30days', label: "Past 30 days"},
            {data: 'past3months', label: "Past 3 months"},
            {data: 'past6months', label: "Past 6 months"},
            {data: 'allTime', label: "All time", isDefault: true}];
        var ct = [{data: 'expenses_breakdown', label: "Spending Breakdown", isDefault: true},
            {data: 'income_vs_expenses', label: "Income vs Spending"},
            {data: 'budget_vs_expenses', label: "Budget vs Spending"}];
        analysis_page.timeframe = new PfsSelectList($('#timeframe'), tf, function(type){analysis_page.updateReportByDate(type);});
        analysis_page.charttype = new PfsSelectList($('#chart_type'), ct, function(type){analysis_page.updateReportByChartType(type);});
    });

    var chart = {
        object : null,
        colors : ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C','#B5CA92'],
        cache: {},
        init : function(){
            Highcharts.setOptions({
                lang: {
                    months: ['January', 'March', 'March', 'April', 'May', 'June', 
                        'July', 'August', 'September', 'October', 'November', 'December'],
                    weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                    thousandsSep: ',',
                    decimalPoint: '.'
                },
                title: {
                    style: {
                        color: '#3E576F',
               ...