JSFiddle - React, Tailwind, and code Playground
HTML
<label>
<select class="allselect" name="typeselect" id="typeselect">
<option value="off">Select...</option>
<option value="normalshoes">normalshoes</option>
<option value="smallshoes">smallshoes</option>
<option value="bigshoes">bigshoes</option>
<option value="coats">coats</option>
<option value="regularpants">regularpants</option>
<option value="bigpants">bigpants</option>
<option value="tshirt">tshirt</option>
<option value="long">long</option>
<option value="big">big</option>
<option value="dress">dress</option>
<option value="hats">hats</option>
<option value="bags">bags</option>
<option value="glasses">glasses</option>
<option value="other">other</option>
</select>
</label>
<div id="typeselectIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
<div id="secondstep">
<input type="text" class="quantity" name="quantity" id="quantity">
<div id="quantityIMG" class="status"><img src="http://oi62.tinypic.com/2d0l214.jpg" alt="OK" class="IMGself"></div>
</div>
CSS
.status {display:inline;visibility:hidden;}
#secondstep {visibility:hidden;}
.IMGself {vertical-align:-10px; width: 45px;}
JavaScript
//onload event
window.onload = function(){
//get elements
var typeselect = document.getElementById("typeselect");
var typeImg = document.getElementById('typeselectIMG');
var secondstep = document.getElementById("secondstep");
var quantInput = document.getElementById("quantity");
var quantImg = document.getElementById("quantityIMG");
//select event
typeselect.onchange = function(){
if( this.value != 'off' ){
typeImg.style.visibility = 'visible';
secondstep.style.visibility = 'visible';
}else{
typeImg.style.visibility = 'hidden';
quantImg.style.visibility = 'hidden';
secondstep.style.visibility = 'hidden';
}
};
//input changed event
quantInput.oninput = function(){
if(this.value != ''){
quantImg.style.visibility = 'visible';
}else{
quantImg.style.visibility = 'hidden';
}
};
};