JSFiddle - React, Tailwind, and code Playground

HTML

<div class="userChoice" id="userChoice">
      <a class="fauxBtn" id="memberLink" href="javascript: userSelection('memberLink');">I'm a Member</a>
      <a class="fauxBtn" id="nonMemberLink"  href="javascript: userSelection('nonMemberLink');">I'm a Non-Member</a>
      <a class="fauxBtn" id="studentLink" href="javascript: userSelection('studentLink');">I'm a Student</a>
</div>
<div id="membershipTest">This is membershipTest</div>
<div id="membershipFail">This is membershipFail</div>
<div id="memberCosts">This is memberCosts</div>
<div id="nonMemberCosts">This is nonMemberCosts</div>
<div id="studentCosts">This is studentCosts</div>
<div id="preAmble">This is preAmble</div>

JavaScript

function userSelection(userChoice){

    var uC = userChoice;
    var userChoice = document.getElementById("userChoice");
    var memTest = document.getElementById("membershipTest");
    var memFail = document.getElementById("membershipFail");
    var memCosts = document.getElementById("memberCosts");
    var nonMemCosts = document.getElementById("nonMemberCosts");
    var studentCosts = document.getElementById("studentCosts");
    var para =  document.getElementById("preAmble");

    if(uC == "memberLink"){
        nonMemCosts.style.display = "none";
        memTest.style.display = "block";
        studentCosts.style.display = "none";
        userChoice.style.display = "none";
    }else if(uC == "nonMemberLink"){
        nonMemCosts.style.display = "block";
        memTest.style.display = "none";
        studentCosts.style.display = "none";
        userChoice.style.display = "none";
    }else if(uC == "studentLink"){
        nonMemCosts.style.display = "none";
        memTest.style.display = "none";
        studentCosts.style.display = "block";
        userChoice.style.display = "none";
    }
}