jQuery addClass example

Change class name on click in jQuery

HTML

<div class="container">

      <ul class="tab-menu">
        <li class="current"><a href="#tab1" data-category="Coffee">Coffee</a></li>
        <li><a href="#tab2" data-category="Gift">Gift</a></li>
        <li><a href="#tab3" data-category="Tea">Tea</a></li>
      </ul>
      <div class="tab-container">
        <div id="tab1" class="tab-content">
        </div>
        <div id="tab2" class="tab-content">
           
        </div>
        <div id="tab3" class="tab-content">
       
        </div>
      </div>

    </div>

CSS

body {
  margin: 0;
  padding: 0
}

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 50px
}

.tab-menu {
  display: block;
  margin: 0;
  padding: 0;
  text-align: left
}

.tab-menu li {
  list-style: none;
  display: inline-block;
  margin: 0 10px 10px 0
}

.tab-menu li a {
  display: block;
  color: #666;
  padding: 15px;
  font-size: 14px;
  font-family: Arial;
  text-decoration: none;
  border: 1px solid #ddd
}

.tab-content {
  display: none
}

#tab1 {
  display: block
}

.tab-container {
  border: 1px solid #ddd;
  padding: 30px;
  font-family: Arial;
  font-size: 14px;
  color: #666
}

.current a {
  background: #666 !important;
  border: 1px solid #666 !important;
  color: #fff !important
}

JavaScript

$(document).ready(function() {
             $(".tab-menu a").click(function(event) {
               event.preventDefault();
               $(this).parent().addClass("current");
               $(this).parent().siblings().removeClass("current");
               var tab = $(this).attr("href");
               const categoryName = $(this).data('category');
               const products = getProducts(product, categoryName);
               $(tab).html('');
               for (let product of products) {
               		$(tab).append( "<p>Product name:"+product.product_name+"</p><p>Product Id:"+product.product_id+"</p><p>Price:"+product.product_price+"</p>");
               }
          
               $(".tab-content").not(tab).css("display", "none");
               $(tab).fadeIn();
             });
             
              $(".tab-menu .current a").trigger('click')
           });
           
           
           function getProducts(products = [], categoryName = 'Gift') {
    					let result = [];

    					for (let product of products) {
        				if (product.categories === undefined || !Array.isArray(product.categories)) {
           	 			break;
        				}

                for (let category of product.categories) {
                    if (category.categoryName === categoryName) {
                        result.push(product);
                        break;
                    }
                }
    					}

                return result;
            }

      //Products 
        var product = [{
        "product_name": "Product 1",
        "product_id": "8991",
        "product_price": "$69",
        categories: [{
            categoryName: 'Tea'
        }, {
            categoryName: 'Coffee'
        }],

    },

    {
        "product_name": "Product 2",
        "product_id": "8951",
        "product_price": "29 TL",
        categories: [{
            categoryName: 'Tea'
        }]


    },
    {
        "product_name": "Product 3",
        "product_id":...