JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="mobileMachineNavSmaller">
    <span><a href="#ProfileId1">55</a></span>
    <br/>
    <span><a href="#frog">80</a></span>
    <br/>
    <span><a href="#cat">135</a></span>
    <br/>
    <span><a href="#potato">145</a></span>
    <br/>
    <span><a href="#munchkin">200</a></span>
</nav>



<div class="profile" id="ProfileId1">
    55
</div>
<div class="profile" id="frog">
    80
</div>
<div class="profile" id="cat">
    135
</div>
<div class="profile" id="potato">
    145
</div>
<div class="profile" id="munchkin">
    200
</div>

CSS

.profile {
    width: 50px;
    height: 80px;
    background: #000;
    color: #FFF;
    border: 1px solid #FFF;
    cursor: pointer;
}

.profile.selected {
    background: #FF0;
    color: #000;
}

JavaScript

$('.profile').click(function() {
    $(this).siblings().removeClass('selected');

    $(this).toggleClass('selected');
});


$("#mobileMachineNav span, #mobileMachineNavSmaller span").click(function() {
    $(".profile").siblings().removeClass('selected'); // clear backgrounds on all other divs
    $($($(this).html()).attr("href")).addClass('selected');
});