JSFiddle - React, Tailwind, and code Playground
HTML
<div id="math">
<p>Tutor 1</p>
<ul name="t1" id="math">
<li>Monday: 9:00am - 11:00am</li>
</ul>
</div>
<div id="paperediting">
<p>Tutor 2</p>
<ul name="t2" id="paperediting">
<li>Tuesday: 11:00am - 8:00pm</li>
</ul>
</div>
<form>
Select your tutoring subject:
<select id="subjectList" onchange="myFunction()">
<option>Select a subject</option>
<option>Math</option>
<option>Foreign Language</option>
<option>Science</option>
<option>Paper Editing</option>
</select>
</form>
<p>Tutoring for for your subject is available on:</p>
<textarea type="textarea" rows="4" cols="50" id="output"></textarea></p>
JavaScript
myFunction()
{
var subject = document.getElementById("subjectList");
var subjectSelect = subject.options[subject.selectedIndex].text;
var mathDiv = document.getElementById("math");
var paperDiv = document.getElementById("paperediting");
var outputContent = document.getElementById("output");
if (subjectSelect == "Math")
{
outputContent.innerHTML = mathDiv.innerHTML;
} else if (subjectSelect === "Paper Editing")
{
outputContent.innerHTML = paperDiv.innerHTML;
}
}