JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="#" id="c" class="text-right">+add more</a>
    <table class="table">
      <thead>
        <tr>
          <th>S.No.</th>
          <th>Name</th>
          <th>Dose</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td style="width:80%">
            <input type="text" class="form-control">
          </td>
          <td style="width:80%">
            <input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
          </td>
          </tr>
      </tbody>

    </table>

CSS

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

JavaScript

function updateNumber() {
   x = 0
        $('table.table tbody tr').each(function(i,v){
            
        	$(this).find('td:eq(0)').text(x+1)
        	x++;
        });
}
    $("#c").on('click',function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        updateNumber();
        console.log($('table.table tbody tr'));
    });
    $('body').on("click",".rm", function(e) {
        e.preventDefault();
       $(this).parents('tr').remove();
        updateNumber();
     });