Show/Hide divs on Form with multiple radio groups

by Venkata Sai Vamsi Penupothu

HTML

<p>Question 1</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="yesCheck1"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="noCheck1"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="naCheck1"> Not applicable <br>
<div id="ifNo1" style="display:none">
    <p>Recommendation goes here</p>
</div>

<h2>Section header</h2>        

<p>Question 2</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="yesCheck2"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="noCheck2"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="naCheck2"> Not applicable <br>
<div id="ifNo2" style="display:none">
    <p>Recommendation goes here</p>
</div>
    
    <p>Question 3</p>

<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="yesCheck3"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="noCheck3"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="naCheck3"> Not applicable <br>
    <div id="ifNo3" style="display:none">
        <p>Recommendation goes here</p>
    </div>

JavaScript

function yesnoCheck(id) {


newId = id.split('k')[1]; //this will give 2 in "q2" (splitting)
    
    var noCheck = "noCheck"
    newNoCheck = noCheck.concat(newId);  //if the newId is 2 then it will be "noCheck2"

var ifNo = "ifNo"
    newifNo = ifNo.concat(newId);  //if the newId is 2 then it will be "ifNo2"

if (document.getElementById(newNoCheck).checked) {
    document.getElementById(newifNo).style.display = 'block';
}
else document.getElementById(newifNo).style.display = 'none';


}