JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<div>
  Bilangan Peserta : <span id="participants_count">1</span>
</div>

<table id="participants_list">
  <thead>
    <tr>
      <th>Nama</th>
      <th>No. KP</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name='nama[]'>
      </td>
      <td>
        <input name='nokp[]'>
      </td>
      <td>
        &nbsp;
      </td>
    </tr>
  </tbody>
</table>
<button id="add_row">Tambah Peserta</button>

CSS

.remove_row { cursor : pointer; 
  border-radius:8px;
  height: 16px; width: 16px;
  color: #000;
  background-color: #ccc;
  display: inline-block;
  text-align: center; line-height: 16px; font-size: 12px;
}
.remove_row:hover {
  background-color: #f00; color: #fff;
}

JavaScript

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

$('#participants_list').on('click', '.remove_row', function(){
	$(this).parent().parent().remove();
	count_participants();
});

$('#add_row').on('click', function(){
	$('#participants_list tbody').append(participant_row);
  count_participants();
});

function count_participants(){
  $('#participants_count').html($('#participants_list tbody tr').length);
}