How to add and remove table rows using checkboxes - php

Question

The problem is here that I have successfully written the code to add and remove row on checked checkbox but it only works for the first element.
Like when I click on the first element it adds a row and on unchecking it remove that row second time when I check and uncheck the second checkbox it adds a row on checked and removes row on unchecked.
here is jquery code
<script type="text/javascript">
$(document).ready(
function () {
$('.finding').change(
function () {
if ($('.finding').is(':checked')) {
var finding = $(this).next('label').text();
$('#findings-table').append("<tr><td>"+finding+"</td></tr>");
}
else {
$('#findings-table').empty();
}
});
});
</script>
here is php code i'm getting checkboxes
if ($checkResult > 0) {
for ($i=0; $i < $checkResult ; $i++) {
$result = mysqli_fetch_assoc($query);
$findings = $result['name'];
$count = 1 + $i;
echo"<tr>
<th scope='row'>$count</th>
<td scope='col'>
<div class='input-group'>
<input class='finding form-check-input' type='checkbox' name='findings[]' value='$findings'>
<label class='input-label pt-1 px-3'>$findings</label>
</div>
</td>
</tr>";
}
}
and finally here is my html code where checkboxes appear
<div class='table-container' style="height: 21vh;">
<table class="table table-hover" style="line-height: 7px;">
<tbody>
<?php include 'getfindings.php'; ?>
</tbody>
</table>
</div>

Answer 1

I could not figure out what #findings-table is, therefor I just created a table.
See this:
$(function() {
$('.finding').on('change', function(e) {
var $this = $(e.currentTarget),
$findingTable = $('#findings-table'),
labelText = $this.parents('.input-group').find('.input-label').text();
if ($this.is(':checked')) {
$findingTable.append($('<tr/>').append($('<td/>').text(labelText)));
} else {
$findingTable.empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="findings-table"></table>
<div class='table-container' style="height: 21vh;">
<table class="table table-hover" style="line-height: 7px;">
<tbody>
<tr>
<th scope='row'>1</th>
<td scope='col'>
<div class='input-group'>
<input class='finding form-check-input' type='checkbox' name='findings[]' value='a'>
<label class='input-label pt-1 px-3'>nice a</label>
</div>
</td>
</tr>
<tr>
<th scope='row'>2</th>
<td scope='col'>
<div class='input-group'>
<input class='finding form-check-input' type='checkbox' name='findings[]' value='b'>
<label class='input-label pt-1 px-3'>nice b</label>
</div>
</td>
</tr>
<tr>
<th scope='row'>3</th>
<td scope='col'>
<div class='input-group'>
<input class='finding form-check-input' type='checkbox' name='findings[]' value='c'>
<label class='input-label pt-1 px-3'>nice c</label>
</div>
</td>
</tr>
<tr>
<th scope='row'>4</th>
<td scope='col'>
<div class='input-group'>
<input class='finding form-check-input' type='checkbox' name='findings[]' value='d'>
<label class='input-label pt-1 px-3'>nice d</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>