JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="question">
    <label for="options1">Select your option</label>
    <select class="selectWithOther" name="options1">
        <option value="Option1">Option 1</option>
        <option value="Option2">Option 2</option>
        <option value="other">Other...</option>
    </select>
    <div class="otherWrapper">
        <label for="other1">Other: </label>
        <input type="text" name="other1" />
    </div>
</div>

<div class="question">
    <label for="options2">Select another option</label>
    <select class="selectWithOther" name="options2">
        <option value="Option1">Option 1</option>
        <option value="Option2">Option 2</option>
        <option value="other">Other...</option>
    </select>
    <div class="otherWrapper">
        <label for="other2">Other Option: </label>
        <input type="text" name="other2" />
    </div>
</div>

CSS

.otherWrapper { display:none; }
.question { border: 1px solid green; margin-bottom:10px;padding:5px; }

JavaScript

$('.selectWithOther').change(function() {
    var display = $(this).val() == 'other' ? 'block' : 'none';
    $(this).next('.otherWrapper').css('display',display);
});