JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<div class="all-days">
    
    <div class="wrapper-day sunday">
        <div class="day">SU</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day monday">
        <div class="day">M</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day tuesday">
        <div class="day">T</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day wednesday">
        <div class="day">W</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day thursday">
        <div class="day">TH</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day friday">
        <div class="day">F</div>
        <button class="trigger-day">Show This Day</button>
    </div>
    <div class="wrapper-day saturday">
        <div class="day">SA</div>
        <button class="trigger-day">Show This Day</button>
    </div>
</div>

CSS

.wrapper-day {
    float: left;
}

.day {
    width: 100px;
    height: 100px;
    background: black;
    margin: 5px;
    color: #ddd;
    text-align: center;
    line-height: 100px;
}

.hide {
    display: none;
}


/* colors */
.monday .day {
    background: orange;
}

.tuesday .day {
    background: blue;
}

.wednesday .day {
    background: green;
}

.thursday .day {
    background: red;
}

.friday .day {
    background: purple;
}

.saturday .day {
    background: navy;
}

JavaScript

$( function() {
       
    var $daysWrappers = $('.wrapper-day'),
        $dayBoxes = $daysWrappers.find('.day'),
        $triggers = $daysWrappers.find('.trigger-day'),
        currentDayOfWeek = new Date().getDay();
    
    // Listen to clicks on each button and toggle visibility of the 
    // corresponding day
    $triggers.on( 'click', function( e ) { 
        
        // Determine the day that was clicked based on its index
        // in the set of matched elements
        var $this = $( this ),
            $parent = $this.parents('.wrapper-day'),
            dayClicked = $daysWrappers.index( $parent );

        toggleDay( dayClicked );
            
    });
    
    // Because the days are laid out in the same order as days of the week,
    // we can leverage the currentDayOfWeek to show the correct
    
    function toggleDay( day ) {
        
        // Hide all days
        $dayBoxes.each( function( itm, idx ) {
            $( this ).addClass('hide');
        });
        
        $dayBoxes.eq( day ).removeClass('hide');
    }
    
    // Only show the current day of the week on page load
    toggleDay( currentDayOfWeek );
    
});