How to show corresponding elements data-category with menu buttons?

Really appreciate any and all help on this.

When the page loads, the all filter button is active . It shows a maximum of 6 items (preferably randomly chosen each time the page is loaded, but not a must). When clicked on other filter buttons, each filter button loads maximum 6 corresponding items based on data-category.

All filter buttons show a load more button only if there are more than 6 corresponding items. Once the load more button is clicked, the button disappears and all remaining corresponding data-category items are loaded.

Right now the filter buttons don’t load the corresponding data-categories (max 6) except for all . I think something is going wrong in the loop, but not sure what exactly. Html and css are fine, the issue is with the Javascript code. See preview & example code here: https://plnkr.co/edit/QVqMwhUuf6yUX7W2?open=lib%2Fscript.js

HTML

<body>
<!-- Portfolio Section -->
        <section class="portfolio section" id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="section-title padd-15">
                        <h2>Portfolio</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="portfolio-filter">
                        <button type="button" class="active" data-filter="all">All</button>
                        <button type="button" data-filter="animation">Animation</button>
                        <button type="button" data-filter="game">Game</button>
                        <button type="button" data-filter="miscellaneous">Miscellaneous</button>
                    </div>
                </div>
                <div class="row">
                    
                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info ">
                                <h4>Animation #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #2</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #7</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #8</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #3</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #4</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #5</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #6</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #9</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #2</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="miscellaneous">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Miscellaneous #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #3</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #4</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #5</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #6</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #7</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #8</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #9</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #11</h4>
                            </div>
                        </div>
                    </div>
                    
                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #12</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="load-items padd-15">
                        <button class="btn next hidden"> Show all </button>
                    </div>
                </div>

            </div>
        </section>
        <!-- Portfolio Section End--> 
</body>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
html, body {
  scroll-behavior: smooth;
  letter-spacing: 0.0625rem;
  line-height: 1.5;
  font-size: 100%;
  font-weight: 200;
  height: 100%;
  width: 100%;
}
::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn {
  font-size: 16px;
  padding: 12px 35px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 40px;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background-color: red; 
}
.btn:hover {
  transform: scale(1.05);
}
.hidden {
  display: none !important;
}
.padd-15 {
  padding: 0 15px;
}
.section {
  background-color: #f2f2fc;
  min-height: 100vh;
  display: block;
  padding: 0 30px;
  position: fixed;
  left: 270px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.section .container {
  padding-top: 60px;
  padding-bottom: 70px;
  margin: auto;
  max-width: 1100px;
  width: 100%;
}
.section .container .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  position: relative;
}
.section .container .section-title {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 60px;
}
.section .container .section-title h2 {
  font-size: 30px;
  font-weight: 700;
  color: #302e4d;
  margin: 0;
  position: relative;
}
.section .container .section-title h2:before {
  content: '';
  height: 4px;
  width: 25px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.section .container .section-title h2:after {
  content: '';
  height: 4px;
  width: 50px;
  position: absolute;
  top: 100%;
  left: 0;
}
.portfolio .container {
  padding-bottom: 40px;
}
.portfolio .container .portfolio-filter {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.portfolio .container .portfolio-filter button {
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 10px;
  color: #302e4d;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-filter button.active{
  color: red;
}
.portfolio .container .portfolio-item {
  flex: 0 0 33.3%;
  max-width: 33.33%;
  margin-bottom: 30px;
}
.portfolio .container .portfolio-item.hide {
  display: none;
}
.portfolio .container .portfolio-item.show {
  display: block;
  animation: showItem 0.5s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner {
  border: 4px solid #fdf9ff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info h4, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info .icon {
  transform: translate(0px);
  opacity: 1;
}
.portfolio .container .portfolio-item .portfolio-item-inner img {
  width: 100%;
  display: block;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  z-index: 1;
  padding: 30px;
  opacity: 0;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: capitalize;
  transition: all 0.3s ease;
  transform: translate(-20px);
  opacity: 0;
}
.portfolio .container .load-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.portfolio .container .load-items .btn {
  margin: 0 15px;
  cursor: pointer;
}
.portfolio .container .load-items .btn.hide {
  display: none;
}

JS

const filterContainer = document.querySelector(".portfolio-filter");
const filterBtns = Array.from( filterContainer.children );
const totalFilterBtn = filterBtns.length;
const portfolioItems = Array.from( document.querySelectorAll(".portfolio-item") );
const totalPortfolioItem = portfolioItems.length;
const nextButton = document.querySelector("button.next");
const maxNumber = 6;


function portfolioItemFilter(){
    
    // when all items load
    if(filterContainer.querySelector("button").getAttribute("data-filter") === "all" && filterContainer.querySelector("button").classList.contains("active") ) {
        
        for( let i = 0; i < totalPortfolioItem; i++){
            if(i < maxNumber){
                portfolioItems[i].classList.add("show");
            } else {
                portfolioItems[i].classList.add("hide");
            }
        }

        if( totalPortfolioItem > maxNumber) {
            nextButton.classList.remove("hidden");
        }

        nextButton.addEventListener("click", function() {

        for( let i = maxNumber; i < totalPortfolioItem; i++){
            
            portfolioItems[i].classList.remove("hide");
            portfolioItems[i].classList.add("show");
        }

            nextButton.classList.add("hidden");
        })
        console.log("yes");
    }
        

    // when clicked on filter buttons
    for(let i = 0; i < totalFilterBtn; i++){
        filterBtns[i].addEventListener("click", function(){
            filterContainer.querySelector(".active").classList.remove("active");
            this.classList.add("active");
            
            const filterValue = this.getAttribute("data-filter");

            for(let k = 0; k < totalPortfolioItem; k++){
                portfolioItems[k].classList.remove("show");
                portfolioItems[k].classList.remove("hide");

                if( filterValue === portfolioItems[k].getAttribute("data-category") ){

                    if(k <= maxNumber){
                        return portfolioItems[k].classList.add("show") ;
                    } 
                    else if (k >= maxNumber){
                        portfolioItems[k].classList.add("hide");

                        nextButton.classList.remove("hidden");

                        nextButton.addEventListener("click", function(){
                            nextButton.classList.add("hidden");
                            console.log(portfolioItems[k].classList);

                            portfolioItems[k].classList.remove("hide");
                            portfolioItems[k].classList.add("show");
                            return;
                        });
                    }   
                }
                else{
                    portfolioItems[k].classList.remove("show");
                    portfolioItems[k].classList.add("hide");
                }
                if(filterValue === 'all'){
                    portfolioItems[k].classList.remove("hide");
                    portfolioItems[k].classList.add("show");


                    if( totalPortfolioItem > maxNumber){
                        nextButton.classList.add("show");
                        nextButton.classList.remove("hidden");
                            let remaining = portfolioItems.slice( maxNumber );

                            remaining.forEach(el => {

                                el.classList.remove("show");
                                el.classList.add("hide");
                                
                            });
                    }
                }
            }
        });
    }
}

portfolioItemFilter();

Got this working with some help on Stackoverflow.
I’ll leave the code here for the people that are interested.
See preview: https://plnkr.co/edit/F3x4eSnWaG64UZWu?open=lib%2Fscript.js&preview

HTML

<body>
<!-- Portfolio Section -->
        <section class="portfolio section" id="portfolio">
            <div class="container">
                <div class="row">
                    <div class="section-title padd-15">
                        <h2>Portfolio</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="portfolio-filter">
                        <button type="button" class="active" data-filter="all">All</button>
                        <button type="button" data-filter="animation">Animation</button>
                        <button type="button" data-filter="game">Game</button>
                        <button type="button" data-filter="miscellaneous">Miscellaneous</button>
                    </div>
                </div>
                <div class="row">
                    
                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info ">
                                <h4>Animation #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #2</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #7</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #8</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #3</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #4</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #5</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #6</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #9</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="animation">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Animation #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #2</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="miscellaneous">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Miscellaneous #1</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #3</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #4</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #5</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #6</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #7</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #8</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #9</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #10</h4>
                            </div>
                        </div>
                    </div>

                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #11</h4>
                            </div>
                        </div>
                    </div>
                    
                    <div class="portfolio-item padd-15" data-category="game">
                        <div class="portfolio-item-inner">
                            <div class="portfolio-img">
                                <img src="https://media.giphy.com/media/h0yZVLoXKJKb6/giphy.gif" alt="portfolio">
                            </div>
                            <div class="portfolio-info">
                                <h4>Game #12</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="load-items padd-15">
                        <button class="btn next"> Show all </button>
                    </div>
                </div>

            </div>
        </section>
        <!-- Portfolio Section End--> 
</body>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
html, body {
  scroll-behavior: smooth;
  letter-spacing: 0.0625rem;
  line-height: 1.5;
  font-size: 100%;
  font-weight: 200;
  height: 100%;
  width: 100%;
}
::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn {
  font-size: 16px;
  padding: 12px 35px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 40px;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background-color: red; 
}
.btn:hover {
  transform: scale(1.05);
}
.hidden {
  display: none !important;
}
.padd-15 {
  padding: 0 15px;
}
.section {
  background-color: #f2f2fc;
  min-height: 100vh;
  display: block;
  padding: 0 30px;
  position: fixed;
  left: 270px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.section .container {
  padding-top: 60px;
  padding-bottom: 70px;
  margin: auto;
  max-width: 1100px;
  width: 100%;
}
.section .container .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  position: relative;
}
.section .container .section-title {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 60px;
}
.section .container .section-title h2 {
  font-size: 30px;
  font-weight: 700;
  color: #302e4d;
  margin: 0;
  position: relative;
}
.section .container .section-title h2:before {
  content: '';
  height: 4px;
  width: 25px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.section .container .section-title h2:after {
  content: '';
  height: 4px;
  width: 50px;
  position: absolute;
  top: 100%;
  left: 0;
}
.portfolio .container {
  padding-bottom: 40px;
}
.portfolio .container .portfolio-filter {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.portfolio .container .portfolio-filter button {
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 10px;
  color: #302e4d;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-filter button.active{
  color: red;
}
.portfolio .container .portfolio-item {
  flex: 0 0 33.3%;
  max-width: 33.33%;
  margin-bottom: 30px;
  display: none;
}

.portfolio .container .portfolio-item.show {
  display: block;
  animation: showItem 0.5s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner {
  border: 4px solid #fdf9ff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info h4, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info .icon {
  transform: translate(0px);
  opacity: 1;
}
.portfolio .container .portfolio-item .portfolio-item-inner img {
  width: 100%;
  display: block;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  z-index: 1;
  padding: 30px;
  opacity: 0;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: capitalize;
  transition: all 0.3s ease;
  transform: translate(-20px);
  opacity: 0;
}
.portfolio .container .load-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.portfolio .container .load-items .btn {
  margin: 0 15px;
  cursor: pointer;
}
.portfolio .container .load-items .btn.hide {
  display: none;
}

@keyframes showItem {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

JS

const filterContainer = document.querySelector(".portfolio-filter");
const filterBtns = Array.from( filterContainer.children );
const totalFilterBtns = filterBtns.length;
const portfolioItems = Array.from( document.querySelectorAll(".portfolio-item") );
const totalPortfolioItems = portfolioItems.length; 
const nextButton = document.querySelector("button.next");
const maxNumber = 6;

//initial filter on page load
let currentFilter = filterContainer.querySelector("button").getAttribute("data-filter");


const render = (filter, reveal) => {
 //for each portfolio item
 for (let i = 0; i < portfolioItems.length; i ++ ) {
   // if show all is clicked
   if(reveal) {
     //and the category matches filter or filter is all
     if(portfolioItems[i].getAttribute("data-category") === filter || filter === "all"){
       //and show is not already added, add show
       if(!portfolioItems[i].classList.contains("show")) portfolioItems[i].classList.add("show");
     //otherwise if the filter doesn't match and the filter isn't all
     } else {
       //and the item is currently shown, hide it
       if(portfolioItems[i].classList.contains("show")) portfolioItems[i].classList.remove("show");
     } 
   //otherwise if show all isn't clicked
   } else {
     //hide all 
     if(portfolioItems[i].classList.contains("show")) portfolioItems[i].classList.remove("show"); 
   }
 }
 
  //if show all isn't clicked then also
  if(!reveal) {
    //select only items that match the filter
    let allowedItems = filter === "all" ? portfolioItems : portfolioItems.filter(item => {
      return item.getAttribute("data-category") === filter
    });

    //and render up to the allowed amount
    for(let i = 0; i < allowedItems.length; i ++) {
      if(i === maxNumber) break;
      allowedItems[i].classList.add("show");
    } 
    
    //if there's more items than allowed
    if(allowedItems.length > maxNumber) {
      //and the show all isn't rendered, show it
      if(nextButton.classList.contains("hidden")) nextButton.classList.remove('hidden');
    //otherwise, if there's less than allowed
    } else {
      //and show all is showing, remove it
      if(!nextButton.classList.contains("hidden")) nextButton.classList.add('hidden');
    }
  }
   
}

//attach next button on click
nextButton.onclick = () => {
  //hides on click
  nextButton.classList.add('hidden');
  //triggers rerender
  render(currentFilter, true)
}

//attach on click to each filter button
filterBtns.forEach( btn => {
    let filterValue = btn.getAttribute("data-filter"); 
    
    btn.onclick = () => {
      //deactivate current active link
      let currentActive = document.querySelectorAll(".active")[0];
      currentActive.classList.remove("active");
      //activate click licked
      btn.classList.add("active");
      //update current filter and rerender
      currentFilter = filterValue; 
      render(currentFilter, false);
  }
})
  

render(currentFilter, false);