JSFiddle - React, Tailwind, and code Playground

HTML

<select style="width: 120px;" name="farm_in" id="farm_in">
    <option></option>
    <option value="option1.com" data-show="[1,2,3,4]">option1.com</option>
    <option value="option2.com" data-show="[2,3,4]">option2.com</option>
    <option value="option3.com" data-show="[2,3,4,5]">option3.com</option>
</select>
<br>
<input style="width: 120px;" type="text" name="one" id="el1" value="one">
<br>
<input style="width: 120px;" type="text" name="two" id="el2" value="two">
<br>
<input style="width: 120px;" type="text" name="three" id="el3" value="three">
<br>
<input style="width: 120px;" type="text" name="four" id="el4" value="four">
<br>
<input style="width: 120px;" type="text" name="five" id="el5" value="five">

CSS

#one, #two, #three {
    height:80px;
    background:#f00
}
#two {
    background:#0f0
}
#three {
    background:#00f
}

JavaScript

$('#farm_in').change(function() {
    $('input').hide();
    $('#el' + $('option:selected', this).data('show').join(', #el')).show();
});