JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/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>

<section class="tabData" id="tab1">
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region2">region2</div>
</section>

<section class="tabData" id="tab2">
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region2">region2</div>

</section>

<section class="tabData" id="tab3">
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region1">region1</div>
<div class="region4">region4</div>

</section>

<section class="tabData" id="tab4">
<div class="region4">region4</div>
<div class="region4">region4</div>
<div class="region1">region1</div>
<div class="region5">region5</div>

</section>

<a class="tab1" href="#">section 1</a>
<a class="tab2" href="#">section 2</a>
<a class="tab3" href="#">section 3</a>
<a class="tab4" href="#">section 4</a>

CSS

.regions > div {padding:10px; display:inline-block; }
.tabData {border:solid 1px Red; margin:8px 0;}
.tabData > div {margin:4px 0;}
.region1 { border-left:solid 5px red;}
.Regions_latam {border:solid 5px red;}


.region2 { border-left:solid 5px blue;}
.Regions_global {border:solid 5px blue;}

.region3 { border-left:solid 5px black;}
.Regions_na { border:solid 5px black;}

.region4 { border-left:solid 5px green;}
.Regions_emea {border:solid 5px green;}

.region5 { border-left:solid 5px yellow;}
.Regions_atci { border:solid 5px yellow;}

JavaScript

// Load region based event's count in region tiles

$(document).ready(function(){
 
//load count on page load
//Default one on page load
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
console.log(region1);

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");

//Default one on page load ends
 


$(".tab1").click(function() {
 console.log("tab1 clicked");
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 =...