JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<table id="billid">
<tr>
  <td><input type="text" class="qty"><input type="text" class=""</td>
</tr>
</table>
<input type="button" value="Add more" class="addmore">
<div class="selectdiv" style="display:none;">
<input type="button" class="first" value="12">
<input type="button" class="second" value="27">

</div>

CSS

.addmore
{
  position:absolute;
  left:300px;
  top:0px;
}
.selectdiv
{
  position:absolute;
  left:300px;
  top:20px;
  height:500px;
  width:500px;
  background-color:white;
  
}
.first
{
  height:20px;
  width:40px
}
.second
{
  height:20px;
  width:40px
}

JavaScript

var current_index;
$(document).ready(function(){
$(".addmore").click(function(){
$("#billid").append('<tr><td><input type="text" class="qty"></td></tr>');
});
$('body').on('focus','.qty',function(){
$(".selectdiv").css("display","inline-block");
var row1 = $(this).closest('tr');
  current_index = row1.index();
});
$('body').on('click','.first',function(){
$(".selectdiv").css("display","none");
$('#billid tr:eq('+current_index+')').find(".qty").val(12);
});
$('body').on('click','.second',function(){
$(".selectdiv").css("display","none");
$('#billid tr:eq('+current_index+')').find(".qty").val(27);
});
});