widget should display post archive by year and on click also by month

I did this for a client and it looked like this:

The PHP code:

<dl class="tree-accordion">
    <?php
    $currentyear = date("Y");
    $years = range($currentyear, 1950);
    foreach($years as $year) { ?>
        <dt><a href=""><i class="fa fa-fw fa-plus-square-o" aria-hidden="true"></i> <?php echo $year; ?></a></dt>
        <?php
        $archi = wp_get_archives('echo=0&show_post_count=1&type=monthly&year=" . $year);
        $archi = explode("</li>', $archi);
        $links = array();
        foreach($archi as $link) {
            $link = str_replace(array('<li>', "\n", "\t", "\s"), '' , $link);
            if('' != $link)
                $links[] = $link;
            else
                continue;
        }
        $fliplinks = array_reverse($links);
        if(!empty($fliplinks)) {
            echo '<dd>';
            foreach($fliplinks as $link) {
                echo '<span>' . $link . '</span>';
            }
            echo '</dd>';
        } else {
            echo '<dd class="tree-accordion-empty"></dd>';
        }
        ?>
    <?php } ?>
</dl>

The archives override filter:

/*
 * Add filter to query archives by year
 */
function newmarket_getarchives_filter($where, $args) {
    if(isset($args['year'])) {
        $where .= ' AND YEAR(post_date) = ' . intval($args['year']);
    }

    return $where;
}

add_filter('getarchives_where', 'newmarket_getarchives_filter', 10, 2);

The CSS code:

.tree-accordion {
    line-height: 1.5;
}
.tree-accordion dt, .tree-accordion dd {}
.tree-accordion dt a {
    display: block;
}
.tree-accordion .fa {
    color: #666666;
}
.tree-accordion dd a {}
.tree-accordion dd span {
    display: block;
}
.tree-accordion dd {
    margin: 0 0 0 20px;
}

The Javascript code:

jQuery(document).ready(function(){
    var allPanels = jQuery('.tree-accordion > dd').hide();

    jQuery('.tree-accordion > dt > a').click(function() {
        $target = jQuery(this).parent().next();

        if(!$target.hasClass('active')) {
            allPanels.removeClass('active').slideUp();
            $target.addClass('active').slideDown(100);
        }

        return false;
    });

    jQuery('.tree-accordion-empty').prev().hide();
});

UPDATE: Remove year after month:

Change this line:

$link = str_replace(array('<li>', "\n", "\t", "\s"), '' , $link);

To:

$link = str_replace(array('<li>', "\n", "\t", "\s"), '', $link);
$link = str_replace($year, '', $link);

The final result: