JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#unit"><span>Unit Information</span></a></li>
        <li><a href="#documents" id="dox"><span>Documents</span></a></li>
        <li><a href="#x"><span>x</span></a></li>
        <li><a href="#y"><span>y</span></a></li>
    </ul>
    <div id="unit"></div>
    <div id="documents">
        <input type="button" id="add_file" value="Add File" />
        <table>
            <tr>
                <th class="id">ID</th>
                <th class="fn">File Name</th>
            </tr>
            <tr>
                <td>001</td>
                <td>myfile.doc</td>
            </tr>
        </table>
    </div>
    <div id="x"></div>
    <div id="y"></div>
</div>
<div id="addbox">
    <input id="yfn" class="fn" type="text" placeholder="Filename" /><br>
    <input id="yfd" class="fn" type="text" placeholder="Description" />
</div>

CSS

*, body {font-size:12px;}
table, th, td, tr {border-collapse:collapse;border:1px solid lightgrey;}
th {background:lightgrey;border:1px solid grey;}
td {height:25px;}
th.id {width:30px;}
th.fn {width:125px;}
#add_file{margin-bottom:15px;}
.fn {width:200px;height:30px;padding:5px;}

JavaScript

$(document).ready(function() {
    var cnt = 2;
    
    $('#tabs').tabs();
    $('#add_file').button(); //for visual appearance only
    $('#dox').click(); //auto-open the Documents tab for convenience

    //init dialog box
    $('#addbox').dialog({
        autoOpen:false,
        title: "Add File:",
        buttons: {
            Add: function() {
                var myfn = $('#yfn').val();
                $('#documents').find('table').append('<tr><td>00'+cnt+'</td><td>'+myfn+'</td></tr>');
                $('#yfn').val('');
                $('#yfd').val('');
                cnt++;
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    }); //END #addbox.dialog

    
    $('#add_file').click(function() {
        $('#addbox').dialog('open');
    }); //END #addfile.click

}); //END document.ready()
    
//$('#documents').find('table').append('<tr><td>002</td><td>another_file.doc</td></tr>');