JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<p id="joinChoice" class="parent">
    <a href="javascript:void(0)" id="mastercard"><span class="overlay">Mastercard</span></a>
    <a href="javascript:void(0)" id="visa"><span class="overlay">Visa</span></a>
    <a href="javascript:void(0)" id="discover"><span class="overlay">Discover</span></a>
</p>

<div class="joinForm">
    <div id="noneForm">noneForm</div>
    <div id="mastercardForm">mastercardForm</div>
    <div id="visaForm">visaForm</div>
    <div id="discoverForm">discoverForm</div>
</div>

CSS

.joinForm div {
    display: none;
}
.on {
    color: red;
    background: yellow;
}

JavaScript

$('#joinChoice a').click(function(){
    $('#joinChoice a').removeClass('on'); /* remove class from all siblings */
    $(this).addClass('on'); /* add class to active sibling */
    
    $('.joinForm div').hide(); /* hide all other forms */
    var subElement = '#' + $(this).attr("id") + 'Form';
    $( subElement ).show(); /* show active form */
});