JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="myQuestions">
<select id="QuestionOptions">
<option value disalbe selected>What Day is it?</option>
<option value="A">Monday</option>
<option value="A">Tuesday</option>
<option value="B">Wednesday</option>
<option value="B">Thursday</option>
<option value="B">Friday</option>
<option value="A">Saturday</option>
<optoin value="A">Sunday</optoin>
</select>
</div>
<div id="myAnswers">
<div id="QuestionC">
<p>Example of question.</p>
</div>
<div id="QuestionD">
<select id="QuestionOptionsD">
<option value disalbe selected>Choose Your Answer</option>
<option id="AnsG" value="G">Answer G</option>
<option id="AnsH" value="H">Answer H</option>
<option id="AnsI" value="I">Answer I</option>
<option id="AnsJ" value="J">Answer J</option>
</select>
</div>
</div>
</body>
JavaScript
var day = document.getElementById('QuestionOptions');
var ansG = document.getElementById('AnsG');
var ansH = document.getElementById('AnsH');
var ansI = document.getElementById('AnsI');
var ansJ = document.getElementById('AnsJ');
// set initial answer to none
ansI.style.display = ansJ.style.display = ansG.style.display = ansH.style.display = 'none';
day.addEventListener('change', function() {
var QO = document.getElementById('QuestionOptions').selectedIndex;
var val = document.getElementsByTagName("option")[QO].value;
if(val === 'A') {
ansG.style.display = ansH.style.display = 'initial';
ansI.style.display = ansJ.style.display = 'none';
} else {
ansG.style.display = ansH.style.display = 'none';
ansI.style.display = ansJ.style.display = 'initial';
}
});