JSFiddle - React, Tailwind, and code Playground

HTML

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>

<table id="webcam-table2">
    <thead>
        <tr>
            <th>Camera <br>Type</th>
            <th>Name</th>
            <th>Quality</th> 
            <th>Motion <br>Detection</th>  
            <th>Email <br>Notice</th> 
            <th>Camera Actions</th> 
        </tr>  
    </thead>     
    <tbody>      
        <tr data-hash="6ab000ef7926b4a182f0f864a0d443fc19a29fdd">    
            <td>WEBCAM</td> 
            <td>test2</td>  
            <td>MOBILE</td>   
            <td>On</td>  
            <td>On</td>
            <td>                         
                <button id="editbutton" onClick='edit(this, "/my-dashboard", "WEBCAM", "test2", "2", "6ab000ef7926b4a182f0f864a0d443fc19a29fdd", "0", "0", "1", "", "", "", "")'>Edit</button>                   
                <button id="delete" onClick='deletecamera("/my-dashboard","6ab000ef7926b4a182f0f864a0d443fc19a29fdd")'>Delete</button>
                <button id="monitor" onClick='startmonitor("/my-dashboard","6ab000ef7926b4a182f0f864a0d443fc19a29fdd","test2","2")'>Monitor</button>
            </td> 
        </tr>  
    </tbody>
    <tbody> 
        <tr data-hash="4947c819a6763bed6fe18653b7af26fec8c33eca">
            <td>AXIS</td>
            <td>myaxiscamera</td>
            <td>HIGH</td>
            <td>Off</td>
            <td>Off</td> 
            <td>
<button id="editbutton" onClick='edit(this, "/my-dashboard", "AXIS", "myaxiscamera2", "0", "4947c819a6763bed6fe18653b7af26fec8c33eca", "1", "1", "0", "", "", "", "")'>Edit</button>

                <button id="delete" onClick='deletecamera("/my-dashboard","4947c819a6763bed6fe18653b7af26fec8c33eca")'>Delete</button> 
                <button id="monitor" onClick='startmonitor("/my-dashboard","4947c819a6763bed6fe18653b7af26fec8c33eca","myaxiscamera","0")'>Monitor</button> 
            </td>
        </tr> 
...

CSS

html
{
    height:100%;
    border-left:none;
    border-right:none;
    overflow:auto;
}

body
{
    height:100%;
    margin:0;
    padding:0;
    overflow:auto;
} 

#webcam-table {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
}

#webcam-table th 
{
    background: none repeat scroll 0 0 #808184;
    border-bottom: 1px solid #2B3D61;
    border-top: 4px solid #2B3D61;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#webcam-table td {
    background: none repeat scroll 0 0 #eeeeee;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}

#webcam-table tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}

#webcam-table2 {
    border-collapse: collapse;
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size: 12px;
    table-layout: auto;
    text-align: left;
    white-space: nowrap;
}

#webcam-table2 th 
{
    background: none repeat scroll 0 0 #808184;
    border-bottom: 1px solid #2B3D61;
    border-top: 4px solid #2B3D61;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    padding: 8px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#webcam-table2 td {
    background: none repeat scroll 0 0 #eeeeee;
    border-bottom: 1px solid #2B3D61;
    border-top: 1px solid transparent;
    color: #333333;
    padding: 8px;
}

#webcam-table2 tr:hover td {
    background: none repeat scroll 0 0 #a8cb17;
    color: #333399;
}

#video{
position: absolute; left: 50px; top: 100px;
}

#table{
position: absolute; right: 50px; top: 100px;
}

JavaScript

function edit(t, to, cameratype, cameraname, cameraquality, camerahash, camerastatus, emailnotice, camerasensitivity, axisuser, axispass, axisip, axisport)
 {
    var js = jQuery.noConflict();
    js("#webcam-table2").hide();
    
    var mydiv = document.getElementById("editform");

    var myform = document.createElement("form");
    myform.method = "post";
    myform.action = to;
    myform.id = "EditCameraForm";
    myform.name = "EditCameraForm";
    
    var myfieldset = document.createElement("fieldset");
    var mylegend = document.createElement ("legend");
    mylegend.innerHTML = "Edit camera settings";
    myfieldset.appendChild(mylegend);
    
    //camera type
    myinput = document.createElement("input");
    myinput.name="camera_type";
    myinput.value=cameratype;
    myinput.type = "hidden";
    myform.appendChild(myinput);
    
    //camera name
    var label = document.createElement("label");
    label.htmlFor="CameraName";
    label.innerHTML="Camera name: ";
    myform.appendChild(label);
    
    var myinput = document.createElement("input");
    myinput.name="camera_name";
    myinput.value=cameraname;
    myinput.id="CameraName";
    myform.appendChild(myinput);
    
    var div_cameraname = document.createElement("div");
    div_cameraname.className = "tooltipContainer info";
    
    //camera quality
    label = document.createElement("label");
    label.htmlFor="CameraQuality";
    label.innerHTML="Camera quality: ";
    myform.appendChild(label);
    
    var myselect = document.createElement("select");
    myselect.name="camera_quality";
    if (cameraquality == 0)
    {
        cameraquality = "High";
        myselect.options[0] = new Option(cameraquality, "HIGH",false,true);
        myselect.options[1] = new Option("Medium", "MEDIUM",false,false);
        myselect.options[2] = new Option("Mobile", "MOBILE",false,false);
    }
    else if (cameraquality == 1)
    {
        cameraquality = "Medium";
        myselect.options[0] = new...