JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div class="form-fields">
    <table>
        <tr>
            <th><label for="id_contact_info">Add More Contact Info: </label></th>
            <td>
                <select name="contact_info" id="id_contact_info">
                    <option value="1">select contact type</option>
                    <option value="2">Cell Phone</option>
                    <option value="3">Work Phone</option>
                </select>
            </td>
        </tr>
        
        <tr class="choice_cell_phone">
            
        </tr>
        
        <tr class="choice_work_phone">
            
        </tr>
        
    </table>
</div>

CSS

body {
    padding: 40px;
    font-family: Arial;
    font-size: 0.850em;
    color: #333;
}

tr {
    margin: 20px 0;
    padding 10px 0;
}

input { margin: 5px 0; }
select { margin-left: 10px; }

JavaScript

$(document).ready(function() {
    
    var cellphone = "<th><label>Cell Phone:</label></th><td><input type='tel' name='cp' value=' ' maxlength='11' /></td>";
    var workphone = "<th><label>Work Phone:</label></th><td><input type='tel' name='wp' value=' ' maxlength='11' /></td>";

    $('#id_contact_info').change(function(){
               
        if ($(this).val() == 2 && $('.choice_cell_phone').children().length == 0) {
            console.log('cell phone');
            $('.choice_cell_phone').append(cellphone);

        } else if ($(this).val() == 3 && $('.choice_work_phone').children().length == 0) {
           console.log('work phone');
           $('.choice_work_phone').append(workphone);
        }
        
    });

});