JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<div class="form-fields">
    <ul>
        <li>
            <label for="id_contact_info">Add More Contact Info</label>
        </li>
        <li id="profile-contact-select">
            <select name="contact_options" id="id_contact_options">
              <option value="0">select contact type</option>
              <option value="1">Mobile Phone</option>
              <option value="2">Work Phone</option>
              <!-- <option value="3">Home Phone</option>
              <option value="4">Work Email</option>
              <option value="5">Personal Email</option> -->
            </select>
        </li>
        <li>
            <ul class="new_option">
            </ul>
        </li>
    </ul>
</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; }
li {
    list-style: none;
}

JavaScript

$(document).ready(function() {
    
    var cellphone = "<li><label>Mobile Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' name='mobilephone' value='' maxlength='12' /></li>";
    var workphone = "<li><label>Work Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' name='workphone' value='' maxlength='12' /></li>";

    $('#id_contact_options').change(function(){
        
        var v = $(this).val();               
        switch (v) 
        {
            case '2':
                console.log('mobile phone');
                $('.new_option').append(mobilephone);
                break;
            case '3':
                console.log('work phone');
                $('.new_option').append(workphone);
                break;
        };
        
    });

});