JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<h2>Question 1</h2>
<input type="radio" name="q1" value="Y"> Yes <br>
<input type="radio" name="q1" value="N"> No <br>
<input type="radio" name="q1" value="NA"> Not applicable
<p>Recommendation goes here</p>
</div>
<div>
<h2>Question 2</h2>
<input type="radio" name="q2" value="Y"> Yes <br>
<input type="radio" name="q2" value="N"> No <br>
<input type="radio" name="q2" value="NA"> Not applicable
<p>Recommendation goes here</p>
</div>
<div>
<h2>Question 3</h2>
<input type="radio" name="q3" value="Y"> Yes <br>
<input type="radio" name="q3" value="N"> No <br>
<input type="radio" name="q3" value="NA"> Not applicable
<p>Recommendation goes here</p>
</div>
CSS
input[type=radio] + p {
display: none;
}
JavaScript
$(function() {
$("input[type=radio]").change(function() {
// Get the value of the currently changed radio button
var val = $(this).val();
$(this)
.parent("div") // Gets the parent div
.find("p") // Find the p element within the div
.css("display", (val === "NA") ? "block" : "none"); // Show/Hide according to the radio value
});
})