JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
            <tr>
              <th>#</th>
              <th>Description of Product</th>
              <th>HSN code</th>
              <th>UOM</th>
              <th> Qty</th>
              <th>Total Weight</th>
              <th>Rate Per Case</th>
              <th>Discount</th>
              <th>Subtotal</th>
            </tr>
            </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text"  placeholder="enter Products" name="product[]" class="form-control"/>
                        </td>
                        <td>
                       <input type="text"   placeholder="enter HSN" name="hsn[]"class="form-control"/>
                        </td>
                        <td>
                       <input type="text"  placeholder="enter uom" name="uom[]" class="form-control"/>
                        </td> <td>
                       <input type="text"  placeholder="enter qty" name="qty[]" class="form-control"/>
                        </td><td>
                       <input type="text"  placeholder="enter weight" name="weight[]"  class="form-control"/>
                        </td><td>
                       <input type="text"  placeholder="enter rate" name="rate[]" class="form-control"/>
                        </td><td>
                       <input type="text"  placeholder="enter discount" name="discount[]" class="form-control"/>
                        </td>
                        <td>6</td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a...

JavaScript

$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='product[]' type='text' placeholder='enter Products' class='form-control input-md'  /></td><td><input  name='hsn[]' type='text' placeholder='enter HSN'  class='form-control input-md'></td><td><input  name='uom[]' type='text' placeholder='enter uom'  class='form-control input-md'></td><td><input  name='qty[]' type='text' placeholder='enter qty'  class='form-control input-md'></td><td><input  name='weight[]' type='text' placeholder='enter weight'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});