JSFiddle - React, Tailwind, and code Playground

by Asifuzzaman

HTML

<table id="table1" border="1" cellspacing="0">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Price</th>
    <th>Quantity</th>
    
  </thead>
  <tbody>
    <tr>
     <td>Goku</td>
      <td>ABDF</td>
      <td>170</td>
      <td>100</td>
      
    </tr>
    
    <tr>
     <td>Goku</td>
      <td>WWWDR</td>
      <td>170</td>
      <td>100</td>
      
    </tr>
    <tr>
     <td>Goku</td>
      <td>ADFGRA</td>
      <td>170</td>
      <td>100</td>
      
    </tr>
  </tbody>
</table>

<br/>

<br/>
<input type="submit" value="Submit" />
<input type="submit" id='clear' value="Clear" />
<br/>

<br/>

<table id="table2" border="1" cellspacing="0">
<thead>
  
</thead>
<tbody>
  
</tbody>
</table>

JavaScript

$('input[type="submit"]').click(function(){
$("#table1").find("thead").each(function(){
	$table1Head=$(this).find("th");
	$("#table2 thead").append("<th>"+$table1Head.eq(1).text()+ " </th>");
  $("#table2 thead").append("<th>"+$table1Head.eq(3).text()+ " </th>");
});
$("#table1 tbody").find("tr").each(function(){
	$table2data=$(this).find("td");
	$("#table2 tbody").append("<tr> <td><input type='text' name='first_name[]' value="+$table2data.eq(1).text()+"></td> <td><input type='text' name='last_name[]' value="+$table2data.eq(3).text()+"></td></tr>");
});
});



$(document).on("click","#clear",function(){

$("#table2").empty();

});


//Neww For Change 


$(document).on('keydown', 'input[name="last_name[]"]', function(e){
-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()
});

//Event Fire for product
$(document).on('focusin','input[name="last_name[]"]', function(){
    //console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change', 'input[name="last_name[]"]',function(){

 var prev = $(this).data('val');
 var current = $(this).val();
 var diff=parseInt(prev)-parseInt(current);
 if(current==0)
 {
 alert("Quantity Can Not Be 0");
$(this).closest('tr').find('input[name="last_name[]"]').val(prev);
 }
 else if(diff<0)
{

alert("Quantity Can Not Be Negative");
$(this).closest('tr').find('input[name="last_name[]"]').val(prev);
} 
else

{
 var name=$(this).closest('tr').find('input[name="first_name[]"]').val();
//console.log("name value " + name);
//console.log("recent value " + current);
//console.log("recent value " + diff);
var data="<tr><td><input type='text' name='first_name[]'/></td> <td><input type='text'  name='last_name[]'/></td></tr>";
    $(data).insertAfter($(this).closest('tr')) 
   ...