Display a new input element after selecting ‘Other’ from select element

Display an “Other” input when a user selects “Other” from a select input.

CodePen

JavaScript

const other = () => {
    const formSelect = document.querySelectorAll('.form-select')
    
    formSelect.forEach((element) => {
        const select = element.querySelector('select')
        const otherOption = element.querySelector('.other-option')
        const otherInput = element.querySelector('.other-input')

        select.addEventListener('change', (event) => {
            if (select.value == 'Other') {
                otherInput.classList.add('show')
                console.log('other!')
            } else {
                otherInput.classList.remove('show')
            }
        })
    })
}
other()

HTML

<form>
  <div class="form-select">
        <select>
            <option>Wedding</option>
            <option>Conference</option>
            <option>Party</option>
            <option>Reception</option>
            <option>Luncheon Banquet</option>
            <option>Rehearsal Dinner</option>
            <option class="other-option" value="Other">Other</option>
        </select>

        <div class="other-input">
            <input type="text" maxlength="30" class="text" data-label="Please describe">
        </div>
    </div>
</form>

CSS

.other-input {
    display: none;

  &.show {
    display: block;
    margin-top: 0.25em;
  }
}

CodePen