JSFiddle - React, Tailwind, and code Playground

HTML

<div class="new_member_box"> 
    <a href="#" class="question1"><h4>Vision</h4></a>
</div>

<div class="new_member_box"> 
    <a href="#" class="question2"><h4>Church History</h4></a>
</div>

<div class="new_member_box"> 
    <a href="#" class="question3"><h4>Becoming a Member</h4></a>
</div>
<div class="new_member_box"> 
    <a href="#" class="question4"><h4>Pastor-in-Training</h4></a>
</div>

<div class="clear" class="question"></div>

<div id="answer1">1</div>
<div id="answer2">2</div>
<div id="answer3">3</div>
<div id="answer4">4</div>

<div class="new_member_box_display" id="answer">Text will appear here when one of the tabs above is clicked</div>

CSS

#answer1, #answer2, #answer3, #answer4 {display: none;}

JavaScript

$('[class^="question"]').on('click', function(e){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).show();
});