Item counter

by anoopsuda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<div class="regions">
  <div class="Regions_latam"><p>0</p></div>
  <div class="Regions_global"><p>0</p></div>
  <div class="Regions_na"><p>0</p></div>
  <div class="Regions_emea"><p>0</p></div>
  <div class="Regions_atci"><p>0</p></div>
</div>

<div class="tabs">
  <div class="tab1">Tab 1</div>
  <div class="tab2">Tab 2</div>
  <div class="tab3">Tab 3</div>
</div>

<div id="tab1">
  <div class="region1">Region 1</div>
  <div class="region2">Region 2</div>
  <div class="region3">Region 3</div>
  <div class="region4">Region 4</div>
  <div class="region5">Region 5</div>
</div>
<div id="tab2">
  <div class="region1">Region 1</div>
  <div class="region1">Region 1</div>
  <div class="region1">Region 1</div>
  <div class="region2">Region 2</div>
  <div class="region3">Region 3</div>
  <div class="region4">Region 4</div>
   
</div>
<div id="tab3">
   
  <div class="region1">Region 1</div>
  <div class="region2">Region 2</div>
  <div class="region3">Region 3</div>
  <div class="region4">Region 4</div>
   <div class="region3">Region 3</div>
  <div class="region4">Region 4</div>
   <div class="region3">Region 3</div>
  <div class="region4">Region 4</div>
   
</div>

CSS

.tabs > div { border:solid 1px red; width:100px; height:30px; display:inline-block;}
#tab1, #tab2, #tab3 {
  
  border:solid 1px red;
  
}

#tab1 > div , #tab2  > div, #tab3  > div {
  border:solid 1px #000;margin:4px 0;
  
}
.regions > div {display:inline-block; margin:0 24px;}

JavaScript

/*
$(document).ready(function(){


var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");


$(".tab1").click(function() {
 
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");

 
});

$(".tab2").click(function() {
 
 var region1 = $('#tab2 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab2 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab2 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab2 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab2 .region5').length;
$(".Regions_atci p").text(region5 + " Events");

 
});


$(".tab3").click(function() {
 
 var region1 = $('#tab3 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab3 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab3 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab3 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab3 .region5').length;
$(".Regions_atci p").text(region5 + " Events");

...