JSFiddle - React, Tailwind, and code Playground

HTML

<select name="participants" id="participants">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<table id="participants_list">
  <thead>
    <tr>
      <th>Nama</th>
      <th>No. KP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name='nama[]'>
      </td>
      <td>
        <input name='nokp[]'>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

// template untuk row field
var participant_row = "<tr><td><input name='nama[]'></td><td><input name='nokp[]'></td></tr>";

// on change untuk dropdown select
$('#participants').on('change', function() {
	// kita add dan cuba retain apa yang dah ada daripada overwrite
  // balik the whole table
  if ($('#participants_list tbody tr').length < parseInt($(this).val())) {
    for (var i = $('#participants_list tbody tr').length; i < parseInt($(this).val()); i++)
      $('#participants_list tbody').append(participant_row);
  }
  
  // kalau terlebih, kita remove dari bawah sebab kalau dah isi
  // yang atas, jangan dia terhilang
  if ($('#participants_list tbody tr').length > parseInt($(this).val())) {
    for (var i = $('#participants_list tbody tr').length; i > parseInt($(this).val()); i--)
      $('#participants_list tbody tr:last').remove();
  }
});