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


    //checking value in array


    //appending data to another table

        $("#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>");


			}
		
		
	});