Как применить одинаковый class к 5 элементам массива js?

Я хочу применить одинаковый class к 5 элементам массива но применяться только к 1 который стоит первым

(контент массив и информацией)

var CATALOG = [
    {
        id: "id1",
        name: "Harry Potter",
        house: "House: Gryffindor",
        img: "http://hp-api.herokuapp.com/images/harry.jpg",
    },
    {   
        id: "id2",
        name: "Hermione Granger",
        house: "House: Gryffindor",
        img: "http://hp-api.herokuapp.com/images/hermione.jpeg",
    },
    {   
        id: "id3",
        name: "Ron Weasley",
        house: "House: Gryffindor",
        img: "http://hp-api.herokuapp.com/images/ron.jpg",
    },
    {   
        id: "id4",
        name: "Draco Malfoy",
        house: "House: Slytherin",
        img: "http://hp-api.herokuapp.com/images/draco.jpg",
    },
    {   
        id: "id5",
        name: "Cho Chang",
        house: "House: Ravenclaw",
        img: "http://hp-api.herokuapp.com/images/cho.jpg",
    },
    {   
        id: "id6",
        name: "Cedric Diggory",
        house: "House: Hufflepuff",
        img: "http://hp-api.herokuapp.com/images/cedric.png",
    },
];

(вывод в html)

var htmlCatalog = "";
    
CATALOG.forEach(({name, house, img, id}) => {
    htmlCatalog += `
        <div id="box" class="container">
            <div class="text">
                <h3>${name}</h3>
                <h4>${house}</h4>
            </div>
            <img src="${img}">
        </div>  
        `;
    
    var html = `
        <div class="wrapper">
            <div class="block">
                <div class="center">
                    <span>search</span>
                    <p>search and do not lose</p>
                </div>
                <div class="search1">
                    <div class="search2">
                        <input placeholder="search" class="search" type="search" id="search">
                        <div class="btn" id="btn"></div>
                    </div>
                </div>
                <div class="contant">
                    ${htmlCatalog}
                </div>
            </div>
        </div>
    `;
    
    contants.innerHTML = html;
})

(поиск по массиву {name} если есть совпадения остальные блоки принимаю class box-hid)

var box = document.querySelector("#box")
CATALOG.forEach(({name, id}) => {
    btn.addEventListener("click", () => {
        if(search.value !== name) {
            box.classList.add("box-hide")
        }
    })
})