How to restrict JS click event behavior inside its parent div

I am building a simple WordPress Shortcode which will display recent blog posts in a tabbed format. The tab behavior is created using vanilla JS.

But the problem is – when two or more instances of the shortcode are used on the same page the JS display/hide action mirrors to each other meaning if I click on a tab in Shortcoe-1, the content of the Div inside the Shortcode-2 displays/hides and vice-versa.

Not sure how to restrict this in its parent div. Any suggestion will be appreciated.

The WP shortcode code

function tab_posts(){
    ob_start();?>
    <div class="tab-area">
    <ul id="alltabs" class="tab-heads" role="tablist">
   <??php
    $categories = get_categories($args);
    foreach ($categories as $category) { ?>
     <li class="tab">
     <span onclick="clickOnTab(event, '<?php echo $category->slug;?>')"  class="catname" role="tab" data-toggle="tab"><?php echo $category->name;?></span>
     </li>
    <?php } ?>
   </ul>
   <section class="content-body">
    <?php
    foreach ($categories as $category) {
        ?>
       <div class="pane" id="<?php echo $category->slug;?>">
       <?php
       $cust_query = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => 5,
            'category_name' => $category->slug,
            'post_status' => 'publish'
        ));
        if ($cust_query->have_posts()):
          while ($cust_query->have_posts()):
                $cust_query->the_post();
               ?>
        <div class="articles">
        <a class="image" href="<?php the_permalink(); ?>">
        <?php if (has_post_thumbnail()){
               the_post_thumbnail(array(550,350 ));
         } ?>
         </a><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            </div>
    <?php endif;?>
    </div><!---tab pane-->
        <?php
    }
?>
    </section><!---tab content-->
    </div><!--post tab pane-->
    <?php
    endwhile;
        endif;
    wp_reset_postdata();
    $output = ob_get_clean();
    return $output;
}
add_shortcode('tab_posts', 'tab_posts');

The JS Code

function add_js(){
    ob_start(); ?>
    <script language="javascript" type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
    var elems = document.getElementsByClassName('tab-heads');
    for (var i=0;i<elems.length;i+=1){
    elems[i].style.display = 'block';
}
}); 
    function clickOnTab(event, tabHead) {
        event.stopPropagation();
        var i, tbody, tlinks;
        tbody = document.getElementsByClassName("pane");    
    for (i = 0; i < tbody.length; i++) {
        tbody[i].style.display = "none";
    }
    tlinks = document.getElementsByClassName("catname");
        for (i = 0; i < tlinks.length; i++) {
    tlinks[i].className = tlinks[i].className.replace(" active", "");
  }
  document.getElementById(tabHead).style.display = "block";
  event.currentTarget.className += " active";
}
</script>
<?php
echo ob_get_clean();
}
add_action('wp_footer', 'add_js');