On click load selected category data

[ Moderator note: moved to How-to and Troubleshooting. ]

I am developing a tab panel which loads data according to the selected category. This is a news area and each news related to a particular year. I have to load the content according to the year selected. I am using year as a category. Here is my current code.

<section class="tab-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-centered program-sort">
                <div class="post_area">
                      <ul class="nav nav-tabs" role="tablist">

                            <?php
                                $loop = new WP_Query( array( 'post_type' => 'sitenews', 'posts_per_page' => -1 ,'orderby' => 'date', 'order' => 'ASC' ) );
                                if ( $loop->have_posts() ) {
                                $counter = 0;
                                while ( $loop->have_posts() ) : $loop->the_post();
                            ?>

                            <?php foreach((get_the_category()) as $category) { $cat_name = $category->cat_name . ' '; } ?>
                            <li role="presentation" class="<?php if($counter==0) { ?>active<?php } ?>"><a>" aria-controls="<?php echo $cat_name; ?>" role="tab" data-toggle="tab"><?php echo $cat_name; ?></a>

                            <?php $counter++; endwhile; } ?>

                </div>
            </div>
        </div>
    </div>
</section>
<section class="tab-inner-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-centered program-sort no-border">
                <div class="post_area">
                    <div class="tab-content">

                        <?php foreach((get_the_category()) as $category) { $cat_name = $category->cat_name . ' '; } ?>
                        <div role="tabpanel" class="tab-pane <?php if($counter==0) { ?>active<?php } ?>" id="<?php echo $cat_name; ?>">

                            <?php
                                $loop = new WP_Query( array( 'post_type' => 'sitenews', 'posts_per_page' => -1 ,'orderby' => 'date', 'order' => 'ASC' ) );
                                if ( $loop->have_posts() ) {
                                while ( $loop->have_posts() ) : $loop->the_post();
                            ?>

                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <div class="news-box">
                                    <div class="news-tag-date">
                                        <span><?php echo $pfx_date = get_the_date('d'); ?></span><?php echo $pfx_month = get_the_date('M'); ?>
                                    </div>
                                    <div class="post-img">
                                        <img src="<?php the_field('thumbnail_image'); ?>">
                                    </div>
                                    <div class="col-lg-12">
                                        <h3><?php the_title(); ?></h3>
                                        <p><?php $xcerpt = get_the_content(); echo substr($xcerpt, 0, 309); ?></p>
                                        <a>" class="btn">Read More</a>
                                    </div>
                                </div>
                            </div>

                            <?php endwhile; } ?>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

In this code, the content area I need to get selected year and load all contents according to the selected year.

I need to load relevant content according to the selected year.

Thanks in advance