JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div id="maincont">
            <div id="menuholder">
                <select id="labeltypes" size="5">
                    <option id="key">Replacement Key</option>
                    <option id="lock">Need new lock</option>
                    <option id="core">Need new Core</option>
                    <option id="complete">Complete Store re-key</option>
                    <option id="other">Other</option>
                </select>
                <div id="comments">
                    <br>
                    Select type of label
                </div>
            </div>
            <div id="content">
                <div id="tablecontainer">
                    <center>
                        <h2>Cores and Keys</h2>
                        <br />
                        <strong><u>Disclosure:</u></strong><br />
                        <div style="text-align: left">
                          <ul>
                            <li>Most stores have either six (6) or seven (7) locks.  These include front doors, back door, pad locks (roof hatch and roll up door), slide lock (stereo cabinet), phone/alarm closet, and Detex units.  Please make sure you account for all locks.</li>
                            <li>When you receive and install your new locking hardware, please return the old hardware to the Store Support Center:
                                <div id="ssc_addr">AutoZone Inc.<br>
                                    Security Systems Dept 8090<br>
                                    123 S. Front St.<br>
                                    Memphis, TN 38103</div></li>
                            <li>If you have any questions or need assistance, please call <strong>1-800-313-9693</strong>, option 2.  (This is only for assistance or questions, orders will not be placed using this option).</li>
                          </ul>
                        </div>
                        <hr />
                        <h3>Thank you for using the AutoZone Self Help...

CSS

.wrapwordinputformat { white-space: normal; }
            #maincont { position: relative; top: 0px; height: 300px }
            #menuholder { position: absolute; top: 0px; background: #777; width: 160px; height: 300px; border: 1px solid #FFF }
            #labeltypes { width: 150px; margin: 5px; overflow: hidden }
            #comments { width: 130px; font-size: 10px; color: #FFF; padding: 5px }
            #content { position: absolute; background: #FFF; top: 0px; left: 0px; width: 400px; height: 300px; padding-left: 20px; border: 1px outset #000 }
            #ssc_addr { text-align: center; font-weight: bold; }
            #tablecontainer { width: 400px }
            #tablecontainer select { height: 20px; }
            #submit { margin-top: 10px; margin-left: 255px; }
            #cctest { border: none; width: 400px; height: 250px;}
            td.fieldname { vertical-align: top; font-size: 10px; color: black; font-weight: normal; width:250px;}
            td.tdinput { width: 100px; }
            textarea { resize: none; height: 55px; }
            td.tdinput > input, textarea, td.tdinput > select { width: 150px; }
            
            #content { margin: 0px 0px 0px 178px; }
            .wrapwordinputformat { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; white-space: normal;}
            html { font: 10px Verdana, Arial, Helvetica, sans-serif; }
}

JavaScript

function getUserName(){
                /*var user = document.cookie.split(";")[0];
                var store = user.split("=")[1].replace(/\D/gi,"");
                return (store.length == 4) ? store : "";*/
                return 1234;
            }
            function storeZeros(str) {
                if(str) return ("000" + str).substr(("000" + str).length - 4, 4);
            }
            jQuery(document).ready(function() {
                 var quant = '<select id="quant"><option></option>';
                 for (i=1; i!=10; i++) quant += '<option>' + i + '</option>';
                 quant += '</select>';
                 var curstore = getUserName();
                 var storepart, storepart2;
                 if (curstore) {
                     storepart = 'value=' + curstore + ' readonly ';
                     storepart2 = '[id!=store]';
                 } else {
                     storepart = '';
                     storepart2 = '';
                 }
                 var curroption;
                 jQuery('#labeltypes').children().click( function(){
                      var current = jQuery(this).attr('id');
                      if ( curroption != current ) {
                      curroption = current;
                      switch(current){
                          case 'lock': 
                              jQuery('#tablecontainer').html('<h2>Need new Lock</h2><table id="field_tbl"><tbody><tr><td class="fieldname">Store</td><td class="tdinput"><input type="text" id="store"  maxlength="4" ' + storepart + '></td></tr><tr><td class="fieldname">Quantity</td><td class="tdinput">' + quant + '</td></tr><tr><td class="fieldname">What is the core marking?</td><td class="tdinput"><input type="text" id="coremark"></td></tr><tr><td class="fieldname">Do you have the control key to remove the old cores?</td><td class="tdinput"><select id="control_flag"><option>Yes</option><option>No</option></select></td></tr><tr><td class="fieldname">Authorization...