<table id="tbl1" class="form-group"> <tr><td class="col-sm-1">Code:</td><td class="col-sm-1"><input type="number" data-type="number" id="Code"/></td><td class="col-sm-1">Fine:</td><td><input type="text" id="Fine" placeholder="Fine"/></td> <td> <a href="java<!-- no -->script:void(0);" id='anc_add' class="btn btn-green">Add Code</a></td> <td><a href="java<!-- no -->script:void(0);" id='anc_rem' class="btn btn-red ">Remove Code</a></td></tr> </table>
<script> $(document).ready(function () { var cnt = 2; $("#anc_add").click(function () { $('#tbl1 tr').last().after('<tr><td class="col-sm-1"> Code:' + cnt + '</td><td class="col-sm-1"><input type="number" id="Code' + cnt + '" placeholder="Code"></td><td class="col-sm-1"> Fine:' + cnt + '</td><td><input type="text" id="Fine' + cnt + '" readonly="readonly" placeholder="Fine"></td></tr>'); cnt++; }); $("#anc_rem").click(function () { if ($('#tbl1 tr').size() > 1) { $('#tbl1 tr:last-child').remove(); } else { alert('One row should be present in table'); } }); var getval = $('input[data-type="number"]').val; }); </script>
id Code Fine