Convert CSS transitions on other elements into JS

        <div class="exp">
            <div class="title">EXPERIENCE</div>

            <button class="button" id="OMI"><span>Ominous</span></button>
            <button class="button" id="RC"><span>RocketCards</span></button>
            <button class="button" id="MRKT"><span>PokeMRKT</span></button>
            <button class="button" id="BIBLE"><span>TheBotBible</span></button>
            <button class="button" id="FREE"><span>Freelance</span></button>
            <button class="button" id="CHAR"><span>Charity</span></button>

            <div id="desc">
                <div class="top">
                    <div class="h1"><p class="date text-secondary"></p></div>
                </div>

                <div class="content">
                    <div class="comp"></div>
                    <div class="exp" style="margin-bottom: 20px"></div>
                </div>
            </div>
        </div>

.title {
    color: white;
    font-size: 30px;
    font-weight: 100;
    margin-top: 5em;
    padding-bottom: 2em;
    text-align: left;
}

.button {
    background-color: black;
    border-radius: 6px;
    border: 0;
    color: #868686;
    padding: 10px max(10px, 5%);
    text-align: center;
    display: inline-flex;
    font-size: 14px;
    transition: all 0.5s;
    cursor: pointer;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}


.button:hover {
    background-color: #1e1e1e;
}

.button:focus {
    background-color: #1e1e1e;
    color: white;
}


.content > .comp {
    color: #6cace4;
    font-size: 16px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: left;
}

.content > .exp {
    line-height: 24px;
    color: #c4c4c4;
    font-size: 14px;
    font-weight: 200;
    text-align: left;
}

.exp > #desc {
    margin-top: 20px;
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    max-width: 73%;
}

.exp > *:focus ~ #desc {
    opacity: 1;
}

/* ominous */

/* position title */
.exp > #OMI:focus ~ #desc > .top > .h1:before {
    color: white;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    opacity: 1;
    content: 'Graphic Design Lead';
}

/* dates */
.exp > #OMI:focus ~ #desc > .top > .date:before {
    opacity: 1;
    content: 'July 2021 - July 2022';
}

/* description */
.exp > #OMI:focus ~ #desc > .content > .exp::before {
    opacity: 1;
    content: 'Created numerous designs for promotional media to be used on brand social media accounts.';
}

/* location */
.exp > #OMI:focus ~ #desc > .content > .comp::before {
    opacity: 1;
    content: 'Remote';
}

/* rocketcards */

/* position title */
.exp > #RC:focus ~ #desc > .top > .h1:before {
    color: white;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    opacity: 1;
    content: 'UX Designer';
}

/* dates */
.exp > #RC:focus ~ #desc > .top > .date:before {
    opacity: 1;
    content: 'November 2021 - March 2022';
}

/* description */

.exp > #RC:focus ~ #desc > .content > .exp::before {
    opacity: 1;
    content: 'Created entire UX layout with components, provided detailed notes on parts of design for conversion into HTML.';
}

/* location */
.exp > #RC:focus ~ #desc > .content > .comp::before {
    opacity: 1;
    content: 'Remote';
}

How can I convert this wonky CSS animation into a stable JS one? I would stick with this but the fading animation doesn’t apply when you unfocus the element or switch between the buttons.

I included a bit more CSS than is probably necessary, but I am attempting to show the entire process that the CSS animation goes through.