JSFiddle - React, Tailwind, and code Playground

by renfley

HTML

<form>
    <table>
        <tr>
            <td>
                <lable>Customer Number</lable>
            </td>
            <td>
                <input type="text" class="addrecord" />
            </td>
        </tr>
        <tr>
            <td>
                <lable>CO CLLI</lable>
            </td>
            <td>
                <input type="text" class="addrecord" />
            </td>
        </tr>
        <tr>
            <td>
                <lable>B1</lable>
            </td>
            <td>
                <input type="text" class="addrecord" />
            </td>
        </tr>
        <tr>
            <td>
                <lable>Key Symptom</lable>
            </td>
            <td>
                <select id="symptoms" name="symptoms" class="addrecord">
                    <option value="BLANK">- Please select -</option>
                    <option value="All_Services_Down">All Services Down</option>
                    <option value="No_Synch">No Synch</option>
                    <option value="Intermitent_Synch">Intermittent Synch</option>
                    <option value="Connect_Cant_Browse">Connect Can't Browse</option>
                    <option value="Internet/Wireless">Wireless</option>
                    <option value="Internet/Other">Internet - Other</option>
                    <option value="No_TV">No TV</option>
                    <option value="No_Audio">No Audio</option>
                    <option value="TV/Pixelation">Pixelation</option>
                    <option value="TV_Freeze">Image Freezing</option>
                    <option value="Multicast_Freeze">Multicast Freezing</option>
                    <option value="TV/Other">TV - Other</option>
                    <option value="NDT">No Dial Tone</option>
                    <option value="CCO">Can't Call Out</option>
                    <option value="CBC">Can't Be Called</option>
                    <option value="Voice/Noise">Noise On the Line</option>
                ...

CSS

@import url(http://fonts.googleapis.com/css?family=Days+One);
 * {
    font-family:'Days One', sans-serif;
}
.addrecord {
    border-bottom-left-radius:0.3125em;
    border-bottom-right-radius:0.3125em;
    border-top-left-radius:0.3125em;
    border-top-right-radius:0.3125em;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function () {
	    $("#cr, #fl, #rt, #wvoc, #field, #cable, #other").keyup(function (event) {
	        var crVal = '611=' + $('#cr').val() + ' / ';
	        var flVal = 'L1=' + $('#fl').val() + ' / ';
	        var rtVal = 'RT=' + $('#rt').val() + ' / ';
	        var wvocVal = 'WVOC=' + $('#wvoc').val() + ' / ';
	        var fieldVal = 'BTS=' + $('#field').val() + ' / ';
	        var cableVal = 'CR=' + $('#cable').val() + ' / ';
	        var otherVal = 'OTHER=' + $('#other').val() + '';
	        $("#LDL").val(crVal + flVal + rtVal + wvocVal + fieldVal + cableVal + otherVal);
	    });
	});

	$(document).ready(function () {
	    $('#LDL').click(function () {
	        $(this).select();
	    });
        $('#test').click(function () {
           $(this).val('');
        });
        $('#test').keyup(function () {
           $(this).val('lll');
        });
	});