Фильтрация карточек товара

Учу JS и возник вопрос. Есть меню (такой вот фильтр товара) и есть сами карточки товара. У карточек есть класс status в html. Каким образом можно реализовать фильтрацию по этому классу? Например, чтобы я нажимал на пункт "New Product" и вылезали карточки только те карточки, у которых в статусе прописано New. Я не прошу готовое решение, хотелось бы узнать куда копать, что читать и каким образом это можно реализовать?

HTML:

<ul class="shop__nav">
        <a href=""><li class="shop__item item-active">Best  Saler</li></a>
        <a href=""><li class="shop__item">New  Product</li></a>
        <a href=""><li class="shop__item">Sale  Product</li></a>
    </ul>
    <div class="shop__block">
        <div class="shop__card card-shop">
            <div class="card-shop__image">
                <a href=""><img src="img/card/card1.png" alt="" class="card-shop__picture"></a>
            </div>
            <div class="card-shop__info">
                <div class="card-shop__status">
                    <i class="fa-solid fa-bolt" style="color: #000000;"></i>
                    <h3 class="card-shop__status_title">NEW</h3>
                </div>          
                <a href=""><p class="card-shop__name">Eye Mesh Boat Shoes</p></a>
                <div class="card-shop__block-price">
                    <a href=""><h2 class="card-shop__price">$220.00</h2></a><span class="card-shop__discount"></span>
                </div>
                <button class="card-shop__button">ADD TO BAG</button>
            </div>
        </div>


    </div>

И ещё один вопрос, где собственно хранить эти карточки? Как это реализовано в интернет-магазинах? Если товаров 1000+, то наверное, нелогично их все хранить в html. Может они хранятся где-нибудь в базах данных или в виде объектов в JS или вообще в файле JSON?