Как сделать так, чтобы при клике на следующий объект, фокус прошлого нажатого объекта не терялся?

У меня есть список из кнопок, пронумерованных от 1 до 20. Мне нужно, чтобы после клика на одну кнопку, а затем на вторую, фокус первой кнопки не исчезал автоматически. Также, нужно чтобы фокус с кнопки исчезал только при клике на ее саму, ни в коем другом случае. Помогите, пожалуйста, решить эту задачку. Второй день над ней сижу, ничего не получаеться. Вот HTML-код для удобства:

<ul class="genre-list">
                <div class="genre-col">
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn1">Comedy</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn2">Criminal</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn3">Detective</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn4">Thriller</button>
                    </li>
                </div>
                <div class="genre-col">
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn5">Romance</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn6">War</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn7">Historical</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn8">Supernatural</button>
                    </li>
                </div>
                <div class="genre-col">
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn9">Drama</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn10">Western</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn11">Adventure</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn12">Political</button>
                    </li>
                </div>
                <div class="genre-col">
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn13">Sci-Fi</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn14">Musical</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn15">Fantasy</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn16">Biography</button>
                    </li>
                </div>
                <div class="genre-col">
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn17">Horror</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn18">Action</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn19">Disaster</button>
                    </li>
                    <li class="genre-item">
                        <button type="button" class="genre-item-btn" id="genreBtn20">Sports</button>
                    </li>
                </div>
            </ul>

CSS-код:

.genre-list {
display: flex;
justify-content: center;
padding-top: 120px;
}


.genre-item {
margin: 60px 70px;
transition: all 0.8s;}
}

.genre-item-btn {
width: 120px;
height: 40px;
font-size: 23px;
color: #fff;
background-color: #202020;
border: none;
outline: none;
border-radius: 50px;
text-align: center;
font-family: 'Marvel', sans-serif;
cursor: pointer;
user-select: none;
transition: all 0.4s;
}

.genre-item-btn:focus {
outline: 5px solid #ff8a00;
pointer-events: none;
}