JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<div class='container' style='z-index:-2;position:absolute; left:17px; top:11px; width:183px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '><b>Roadway Identification:</b>

                </div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:41px; width:137px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '>Road/Route Name:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:66px; width:100px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>NBI Roadway:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:93px; width:140px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>Position/Prefix (5a):</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:118px; width:209px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div...

CSS

a#addNew:Hover, a#showAll:Hover {
    background-color: orange;
    cursor: pointer;
}
/*
div#list > table {
    margin-top: -200px;
}
*/
 a.submitter {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: yellow;
    cursor: pointer;
}
a.deleter {
    position: absolute;
    top: 5px;
    left: 100px;
    background-color: yellow;
    cursor: pointer;
}
tr.hide {
    display:none;
}
/*
--------------------------------------------------------------------------------
*/
 table.rootTable {
    border: solid 2px red;
}
tr.topcontent > td, tr.midcontent > td, tr.botcontent > td, tr.sbotcontent > td {
    /*
    border: solid 1px black;
    */
}
td.topmiddletd a, td.toprighttd a, td.toplefttd a, td.addtd a, td.bottd a {
    cursor:pointer;
}
a.attachedFile {
    display:auto;
    float:left;
    width:20px;
    height:20px;
    background-color: blue;
    margin-left:1px;
    margin-right:1px;
}
a.attachedFile:hover {
    background-color:red;
}
td.trtd {
    float:right;
}
td.toprighttd {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
a.slideTool {
    height: 20px;
    width: 20px;
    background-color:green;
    float:right;
    font-size:24px;
}
a.slideTool:hover {
    background-color:red;
}
a.trashcan, a.addFile {
    background-color:orange;
    width:20px;
    height:20px;
}
a.trashcan:hover {
    background-color:red;
}
span.t, a.trashcan {
    padding:2px;
    margin:2px;
}

JavaScript

var $list;
var $table;
var $_table;
var $outer;
var itemCount = 0;

var _HEIGHT_ = 400;
var _WIDTH_ = 400;
var _LIMIT_;
$(function () {
    onDeviceReady();
});

function onDeviceReady() {
    var _PARENT_AS_ID_ = $("body").attr("parentAsId");
    var _RT_ID_ = Number($("body").attr("astId"));
    var _FM_ID_ = $("body").attr("fmId");
    //alert($("body").html());
    maintainer();
    //populate current forms.
    //query database for items matching the body attributes
    var reportObj = {
        "rt_id": _RT_ID_,
            "as_id": _PARENT_AS_ID_,
            "fm_id": _FM_ID_
    };
    /*
        bentleyPlugins.fetchReports(JSON.stringify(reportObj),function(success){
                                        //returning a list of IDs to have forms created.
                                    success = JSON.parse(success);
                                    alert("inside success\n Array Size:"+success.length);
                                    for(var i = 0; i < success.length; i ++)
                                    {
                                        
                                        
                                        //alert(success[i]["ast_id"]);
                                        //alert("div[ast_id='"+success[i]["ast_id"]+"']");
                                        var t_toString = success[i]["ast_id"];
                                        populateForm(null,null,addBlock(success[i]["ast_id"]), t_toString.toString());
                                    }
                                    },function(){
                                    alert("nothing found");
                                    });*/
    //populate values.
    var ast_id_list = new Arrays();
    $("div.outer").each(function () {
        ast_id_list.push($(this).attr("ast_id"));
        //or call it in here.
    });
}

function maintainer() {
    //going to need to include the CSS file.  apped a link object into the header to do so, for...