Reflect the value based on the specific row of selected appended items using jQuery

I have an issue in which I am trying to capture the value of an input type element on keyup and then reflect that value in a span which is the total amount of the item. I have my snippet but when I try to handle the keyup event on the input type it changes the value of the total for all selected items; I just want to change the value of the total for the row in which the keyup event was triggered and to be able to remove the specific row based on the click of the remove item button. Did I miss something? How can I get the specific row? Can anybody help me with this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$("#allcb").change(function () {
$('tbody tr td input[type="checkbox"]').prop(
"checked",
$(this).prop("checked")
);
});
$(document).on( "keyup",  ".quantity_input",function() {
var value_input = 0;
var price_value = 0;
var total_value = 0;
value_input = $(".quantity_input").val();
price_value = $(".price_value").html();
total_value = parseInt(value_input) * parseInt(price_value);
$(".total_value_row").text(total_value);
});
$(document).on("click",".remove_data" , function(){
alert("I've been clicked! remove the row item");
});
$(document).ready(function () {
$("#add_data").click(function () {
var grid = document.getElementById("Table1");
var message = "Values                 Description\n";
var checkBoxes = grid.getElementsByTagName("INPUT");
var str = ''
for (var i = 0; i < checkBoxes.length; i++) {
if (
checkBoxes[i].checked &&
checkBoxes[i].name !== "allcb" &&
!checkBoxes[i].hasCovered
) {
var row = checkBoxes[i].parentNode.parentNode;
str +=
'<div class="row" ><div class="col-md-8"><p class="me-3"> ' +
'<a href="#" class="text-body">' +
'<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +
'<span>Quantity</span>&nbsp' +
row.cells[2].innerHTML +
"</a></p> " +
'<span class="me-1">Price </span>&nbsp' +
'<span class="me-1 price_value">' +
row.cells[1].innerHTML +
"</span>&nbsp" +
'<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp'+
'<span class= "total_value_row" >total value is</span> '+
"</div></div><hr>";
checkBoxes[i].hasCovered = true;
}
}
$(".whole-div-class").append(str);
});
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" id="Table1">
<thead>
<tr>
<th>
<input type="checkbox" id="allcb" name="allcb" />
</th>
<th>Price</th>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="cb1" name="cb1" />
</td>
<td>200</td>
<td> 25</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb2" name="cb2" />
</td>
<td>300</td>
<td>30</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb3" name="cb3" />
</td>
<td>400</td>
<td>50</td>
</tr>
</tbody>
</table>
<br />
<button type="button" id="add_data">Add data</button>
<hr>
<div class="row whole-div-class"></div>

<!-- end snippet -->

When there is a keyup event on an .quantity_input element, we want only the state of the values in the element's row to change. To achieve this, we need to scope the effects of our state manipulation to the .row that contains the element. We can get the the .row by using jQuery's .closest method and then passing the result to all of the jQuery selector calls in the handler so that the result set will always be constrained to the .row.

$(document).on("keyup", ".quantity_input", function() {
var $row = $(this).closest('.row');
var value_input = 0;
var price_value = 0;
var total_value = 0;
value_input = $(".quantity_input", $row).val();
price_value = $(".price_value", $row).html();
total_value = parseInt(value_input) * parseInt(price_value);
$(".total_value_row", $row).text(total_value);
});

We can take the same approach for the remove handler. Get the .row that is closest to the clicked .remove_data button and call jQuery's .remove on it.

$(document).on("click", ".remove_data", function() {
var $row = $(this).closest('.row');
$row.remove();
});

Note: I would also recommend moving the <hr> that you have as a sibling of .row to be contained by .row, so that you don't get a bunch of <hr> elements remaining as you remove each .row.

In order to reset the checkbox that corresponds to the row that was removed, we would need a way to get the checkbox that corresponds to the row. One way to do this would be with a data-attribute. We could set a data-attribute on each row containing the name of its associated checkbox. Then, when the row is removed, we can use that data-attribute to get the checkbox, uncheck it, and set its hasCovered property to false.

$(document).on("click", ".remove_data", function() {
var $row = $(this).closest('.row');
var checkboxName = $row.data('for');
var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
$row.remove();
$checkbox.prop('checked', false);
$checkbox.get(0).hasCovered = false;
});

The full code example becomes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$("#allcb").change(function() {
$('tbody tr td input[type="checkbox"]').prop(
"checked",
$(this).prop("checked")
);
});
$(document).on("keyup", ".quantity_input", function() {
var $row = $(this).closest('.row');
var value_input = 0;
var price_value = 0;
var total_value = 0;
value_input = $(".quantity_input", $row).val();
price_value = $(".price_value", $row).html();
total_value = parseInt(value_input) * parseInt(price_value);
$(".total_value_row", $row).text(total_value);
});
$(document).on("click", ".remove_data", function() {
var $row = $(this).closest('.row');
var checkboxName = $row.data('for');
var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
$row.remove();
$checkbox.prop('checked', false);
$checkbox.get(0).hasCovered = false;
});
$(document).ready(function() {
$("#add_data").click(function() {
var grid = document.getElementById("Table1");
var message = "Values                 Description\n";
var checkBoxes = grid.getElementsByTagName("INPUT");
var str = ''
for (var i = 0; i < checkBoxes.length; i++) {
if (
checkBoxes[i].checked &&
checkBoxes[i].name !== "allcb" &&
!checkBoxes[i].hasCovered
) {
var row = checkBoxes[i].parentNode.parentNode;
str +=
'<div class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
'<a href="#" class="text-body">' +
'<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +
'<span>Quantity</span>&nbsp' +
row.cells[2].innerHTML +
"</a></p> " +
'<span class="me-1">Price </span>&nbsp' +
'<span class="me-1 price_value">' +
row.cells[1].innerHTML +
"</span>&nbsp" +
'<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp' +
'<span class= "total_value_row" >total value is</span> ' +
"</div><hr></div>";
checkBoxes[i].hasCovered = true;
}
}
$(".whole-div-class").append(str);
});
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="Table1">
<thead>
<tr>
<th>
<input type="checkbox" id="allcb" name="allcb" />
</th>
<th>Price</th>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="cb1" name="cb1" />
</td>
<td>200</td>
<td> 25</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb2" name="cb2" />
</td>
<td>300</td>
<td>30</td>
</tr>
<tr>
<td>
<input type="checkbox" id="cb3" name="cb3" />
</td>
<td>400</td>
<td>50</td>
</tr>
</tbody>
</table>
<br />
<button type="button" id="add_data">Add data</button>
<hr>
<div class="row whole-div-class"></div>

<!-- end snippet -->