JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<div class="profile-info-box">
    <h1>Profile Information </h1>
    <hr>
    <ul id="profile_settings_options">
        <li>
            <label for="id_contact_info">Add More Contact Info: </label>
        </li>
        <li>
            <select id="id_contact_options">
                  <option value="1">select contact type</option>
                  <option value="2">Mobile Phone</option>
                  <option value="3">Work Phone</option>
                  <option value="4">Home Phone</option>
                  <option value="5">Work Email</option>
                  <option value="6">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;
}
#id_contact_options { margin-bottom: 20px; }
tr {
    margin: 20px 0;
    padding 10px 0;
}

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

JavaScript

$(document).ready(function() {
    
    var mobilephone = "<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>";
    var homephone = "<li><label>Home Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' name='homephone' value='' maxlength='12' /></li>";
    var workemail = "<li><label>Work Email:</label></li><li><input type='email' name='workemail' value='' /></li>";

    $('#id_contact_options').unbind('change').bind('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;
            case '4':
                console.log('home phone');
                $('.new_option').append(homephone);
                break;
            case '5':
                console.log('work email');
                $('.new_option').append(workemail);
                break;
        };        
    });

});