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;   
}

div.mainTitle {
    
}
span.t{
    float:left;
}

a.fakeFile{
    display:auto;
    float:left;
    width:20px;
    height:20px;
    background-color: blue;
}
a.fakeFile:hover{
    background-color:red;
}

a.shifter {
    float:right;
    height: 20px;
    width: 20px;
    background-color:green;
    text-align:center;
    border-radius: 4px;
    border: solid 1px black;
}
a.shifter:hover {
    background-color:red;
}
table tr, table tr td {
    border: solid 1px black;
}

JavaScript

var $list;
    var $outer;
    var $ttable;
    var itemCount=0;
$(function(){
    $('body').children().css("z-index","");
    
    
    var $content = $('body').children();
    var $inner = $('<div />').css({
        position: 'relative',
        width: '100%'
    });
    $outer = $('<div class="outer"/>').css({
        position: 'absolute',
        width: '100%',
        overflow: 'auto',
        height: "400px"
    });
    var $title = $("<div class='maintTitle' />");
    $title.html("<span class='t'>[SOME TITLE]</span>");
    var $fakeFile = $("<a class='fakeFile'>X</a>");
    //var $t = $fakeFile.clone();
    //alert($t[0].outerHTML);
    //$title.append($t);
    //alert($title[0].outerHTML);
    //$t = $fakeFile.clone();
    //$title.append($t); 
    $title.append($fakeFile.clone()).append($fakeFile.clone()).append($fakeFile.clone()).append($fakeFile.clone()).append($fakeFile.clone());
    $title.find("a.fakeFile").click(function(){
        var con = confirm("Are you sure you want to delete this file?");
        if (con == true){
             $(this).remove();   
        }
    });
    var $shifter = $("<a class='shifter'>v</a>");
    $shifter.click(function(){
        //alert("ping");
        
        if($(this).text() == "v"){
            $(this).parent("tr").next().slideUp();
            $(this).parent().parent().css("height","");
            $(this).parent("tr").css("height","");
            $(this).text("^");
        }
        else
        {
            $(this).parent("tr").next().slideDown();
            
            $(this).parent().parent().css("height","400px");
            $(this).closest("tr").css("height","400px");
            $(this).text("v");
        }
        
    });
    $title.append($shifter);
    $inner.append($content);
    //$outer.append($title);
    $ttable = $("<table />");
    var $ttr1 = $("<tr />");
    var $ttd1 = $("<td />");
    $ttd1.append($title);
    $ttr1.append($ttd1);
    var $ttr = $("<tr />");
    var $ttd = $("<td...