How to keep the PREFILLED table row(s) while resetting(undoing) the newly added row(s)

Question

Now, when the reset button is pushed, it undos the newly added row(s). But when the no of times it is clicked exceeds the newly added row(s), it removes the prefilled row(s) too. What can i do to prevent the removal of the prefilled row(s)?

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
	$('button[type="reset"]').attr('lastCount', parseInt($('#insert-rows-amnt').val(), 10));
  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ;
    additionalRows = new Array(numNewRows);
    for(i=0;i<numNewRows;i++)
    {
    additionalRows[i]=` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" ></td>
      <td><input type="text"> </td>
  	  </tr>`
      lastRowIndex=lastRowIndex+1;
    }
   
    $tbody.append(additionalRows.join());
  }
});


$('button[type="reset"]').click(function(){
  var cnt = $('button[type="reset"]').attr('lastCount');
  for(var i=0; i<cnt; i++){
  	$('table tbody tr:nth-last-child(' + (cnt-i) + ')').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add</button>
 <button  type="reset" name="reset" >Reset</button><br>

<table id="one">
<thead>
<th>thead</th><th>thead</th><th>thead</th>
</thead>
  <tbody>
  <td>
      <input type="text" value="prefilled data"></td>
       <td><input type="text" value="prefilled data"></td>
      <td>  <input type="text" value="prefilled data"></td>
 </tbody>
</table>

Answer 1

You could add an extra attribute to the rows you add manually.

e.g.

additionalRows[i] =` <tr data-additional='true'>
...
...

and then only remove those rows

$('table tbody tr[data-additional]:nth-last-child(' + (cnt-i) + ')').remove();

Working solution:

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
	$('button[type="reset"]').attr('lastCount', parseInt($('#insert-rows-amnt').val(), 10));
  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table#one tbody ');
    $row = $tbody.find('tr:last');
    var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ;
    additionalRows = new Array(numNewRows);
    for(i=0;i<numNewRows;i++)
    {
    additionalRows[i]=` <tr data-additional='true'>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" ></td>
      <td><input type="text"> </td>
  	  </tr>`
      lastRowIndex=lastRowIndex+1;
    }
   
    $tbody.append(additionalRows.join());
  }
});


$('button[type="reset"]').click(function(){
  var cnt = $('button[type="reset"]').attr('lastCount');
  for(var i=0; i<cnt; i++){
  	$('table tbody tr[data-additional]:nth-last-child(' + (cnt-i) + ')').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add</button>
 <button  type="reset" name="reset" >Reset</button><br>

<table id="one">
<thead>
<th>thead</th><th>thead</th><th>thead</th>
</thead>
  <tbody>
  <td>
      <input type="text" value="prefilled data"></td>
       <td><input type="text" value="prefilled data"></td>
      <td>  <input type="text" value="prefilled data"></td>
 </tbody>
</table>