JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selectBox" class="input-medium">
    <option id="1" value="">Select</option>
    <option id="2" value="date">Date</option>
    <option id="3" value="txt">ID</option>
</select>
<input type="text" class="inputs hide date" name="daterange" id="from" value="1" data-modal="calendar_modal">
<input type="text" class="inputs hide date" name="daterange" id="to" value="2" data-modal="calendar_modal">
<input type="text" class="inputs hide txt" name="3" id="txt" value="3">

CSS

.hide {
    display:none;
}

JavaScript

$(document).on('change', '#selectBox', function () {
    $('.inputs').hide();
    $('.'+this.value).show();
});