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 index = $.inArray(addedEmpid, addedEmployeeId);
  var salaryArray = $.inArray(salarytype, addedSalaryType);
  var booltype = true;
  //appending data to another table
  $('#test tr').each(function(midex, mval) {
    var empids = $(mval).find('td:eq(0)').find('input').val();
    var saltype = $(mval).find('td:eq(1)').find('input').val();
    if (parseInt(empids) == parseInt(addedEmpid) && (saltype == salarytype)) {
      booltype = false;

    }
  });
  if (booltype == false) {
    alert("You already added Employee And Salary Type");

  } else {
    if (empid == "") {
      alert("Please add Employee ID");

    } else {
      $("#test").append(
        "<tr><td><input name='' value='" + $.trim(tableData[0]) + "' style='width: 120px;' readonly > </td><td><input value='" + salarytype + "' style='width: 100px;' readonly ></td></tr>");

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

});