JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<table>
    <tbody>
        <tr>
            <td class="right bold">New or Existing Category: </td>
            <td class="capitalise">
            <select name="categoryType" id="categoryType" required>
                <option value="" selected='selected'>--Please Select--</option>
                <option value="existing">Existing Category - Select from Category list below</option>
                <option value="addNew">Add new Category - Add new Category in Text box below</option>
            </select></td>
        </tr>   
        
        <tr id="existing">
            <td class="right bold">Category: </td>
            <td class="capitalise">
            <select id="categoryExist" name="category_existing" required>
                <option value='' selected='selected'>--Please Select--</option>
            <option value='1'>1</option>
                <option value='2'>2</option>
            </select>
            </td>
        </tr>
        
        <tr id="addNew">
            <td class="right bold">Add Category: </td>
            <td class="capitalise">
                <input id="categoryNone" type="text" name="category" class="capitalise" required />
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$("#categoryType").change(function() {
    if (this.value == 'existing') {
        $('#existing').show();
        $('#categoryNone').attr({name: "difcat", value: '000'});
    } else {
        $('#existing').hide();
    }
    if (this.value == 'addNew') {
        $('#addNew').show();
        $('#categoryExist').attr({name: "othercat", value: '000'});
    } else {
        $('#addNew').hide();
    }
});