JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<table>
    <tr>
        <td>
            <input id="empid" placeholder="employeid">
        </td>
        <td>
            <select id="salarytype">
                <option value="Basic">Basic</option>
                <option value="Normal">Normal</option>
            </select>
        </td>
        <td><span id="button_add"> Add </span> 
        </td>
    </tr>
</table>
<table>
    <tbody id="test"></tbody>
</table>

CSS

<style type="text/css"> table .money-receipt-sales, td, th {
    border: 1px solid #4E8EC2;
}
#button_add {
    text-align: center;
    background: orange;
    color: white;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 3px;
}
#Vouhcerheader_voucher_no {
    width: 140px;
}
.trn_header_input {
    width: 240px;
    text-align: center;
    padding: 4px;
}
</style>

JavaScript

var addedEmployeeId = [];
var addedSalaryType = [];
$("#button_add").click(function () {

    ///getting data from a table 
    var tableData = $(this).closest("tr").find("td input").map(function () {
        return $(this).val();
    }).get();

    //getting salary type by dropdown
    var e = document.getElementById("salarytype");
    var salarytype = e.options[e.selectedIndex].value;

    var empid = document.getElementById("empid").value;
    var addedEmpid = $.trim(tableData[0]);

    //checking value in array
    var flag = false;

    for (var i = 0; i < addedEmployeeId.length; i++) {
        if (addedEmployeeId[i] == empid && addedSalaryType[i] == salarytype) {
            flag = true;
        }
    }

    //appending data to another table
    if (flag) {
        alert("You already added Employee And Salary Type");

    } else {
        if (empid == "") {
            alert("Please add Employee ID");
            exit;
        } else {
            $("#test").append(
                "<tr><td><input name='' value='" + $.trim(tableData[0]) + "' style='width: 120px;'  > </td><td><input value='" + salarytype + "' style='width: 100px;'  ></td></tr>");

            addedEmployeeId.push(addedEmpid);
            addedSalaryType.push(salarytype);
        }
    }

});