JSFiddle - React, Tailwind, and code Playground

HTML

<label  class="field6" for="shower_times">how many showers each takes per day: </label>

<SELECT name="shower_times"  id="mselect" onChange="hola();">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
</SELECT>
<div id="div1">
<BR>
<label  class="field6" for="hour"> hour of the shower: </label>
<input type="text"   name="hour" class="input"> 
</div>

<div id="div2">
<label  class="field6" for="hour1">hour of first shower: </label>
<input type="text" name="hour1" class="input"> 
<BR>
<label  class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> 
</div>
</div>

CSS

#div2 {
 display:none;
}

JavaScript

function hola() {
    var mselect  =  document.getElementById("mselect");
    var mselectvalue = mselect.options[mselect.selectedIndex].value;
    var mdivone =  document.getElementById("div1");
	var mdivtwo =  document.getElementById("div2");
	  
	  if (mselectvalue == 2) {
	   mdivtwo.style.display = "block";
       mdivone.style.display = "none";

	  }
	  else {
	  mdivtwo.style.display = "none";
      mdivone.style.display = "block";
	  }	 
}