JSFiddle - React, Tailwind, and code Playground

by Pralhad Sonar

HTML

<h1>List Of Persons</h1>
<div id="filter-list">
    <table id="filters" cellspacing="0px" cellpadding="20px" text-align="center">
        <thead>
            <tr>
                <td>Field</td>
                <td>Condition</td>
                <td>Value</td>
                <td>Operations</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<fieldset id="fieldset">
    <legend id="legend">Professional development</legend>
    <div id="placeholder">
        <div id="template" class="field_collection">
            <div class="field-wrapper">
                <label for="field_name">Field</label>
                <select id="field_name" name="field_name">
                    <option value="id">id</option>
                    <option value="server_name">server_name</option>
                    <option value="agent_name">agent_name</option>
                </select>
            </div>
            <div class="field-wrapper">
                <label for="field_condition">Condition</label>
                <select id="field_condition" name="field_condition">
                    <option value="Equal to">Equal to</option>
                    <option value="Greater than">Greater than</option>
                    <option value="Smaller than">Smaller than</option>
                </select>
            </div>
            <div class="field-wrapper">
                <label for="field_value">Value</label>
                <input type="text" name="field_value" id="field_value" size="10">
            </div>
        </div>
    </div>
    <button type="button" name="Submit" onclick="AddData();">Add new item</button>
</fieldset>

CSS

.field_collection{
clear:both;
}
.field_collection .field-wrapper{
float: left;
}
.field_collection .field-wrapper label{
display: block;
}
button{
clear: left;
display: block;
}
#filters thead{
background-color: #c4c4c4;
}
#filters, #filters td{
border:1px solid #c4c4c4;
}
#filter-list{
margin-bottom: 30px;
}

JavaScript

function AddData() {
    var rows = "";
    var field_name = document.getElementById("field_name").value;
    var field_condition = document.getElementById("field_condition").value;
    var field_value = document.getElementById("field_value").value;
    var delete_op = '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    rows += "<tr><td>" + field_name + "</td><td>" + field_condition + "</td><td>" + field_value + "</td><td>" + delete_op + "</td></tr>";

    $(rows).appendTo("#filters tbody");
}
function deleteRow(obj) {

    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("filters");
    table.deleteRow(index);
    
}
function ResetForm() {
    document.getElementById("person").reset();
}