To simplify the process, avoid using IDs in duplicated records. Dynamic IDs can be difficult to use as identifiers.
Instead of IDs, use name arrays by adding [] to the name. This will send the data as an array in the form.
I implemented event delegation for the delete buttons to work with all records. Alternatively, you could assign the function to a dummy object and use clone(true) if preferred.
A hidden dummy row is created that will be cloned and filled based on selected rows. A data attribute is utilized to match them against table rows to prevent data deletion when adding new rows.
This approach significantly reduces the amount of code required.
$(document).ready(function() {
//Make delete buttons work with event delegation
$('#products').on('click', '.btn-delete', function() {
$(this).parents('.deliverydata').remove();
});
//When assigning tasks
$('#delivery-assignment-ok').click(function() {
//Loop over the tr elements
$.each($("#myTable tr"), function() {
$tableRow = $(this);
$checkbox = $tableRow.find('.rowSelect');
var checkboxId = $checkbox.attr('id');
//If row is checked and not added yet then add it
if ($checkbox.is(':checked')) {
if ($('#products div[data-checkboxid="' + checkboxId + '"]').length === 0) {
var $clone = $('#productrow_dummy .deliverydata').clone();
//Set corresponding row checkbox id as a data attribute
//For some reason jQuery.fn.data() doesn't seem to work on cloned objects, attr() works fine.)
$clone.attr('data-checkboxid', checkboxId);
//Set input values
$clone.find('.delivery_orderId').val($tableRow.find('.orderId').text());
$clone.find('.delivery_order_city').val($tableRow.find('.deliveryOrdeCity').text());
$clone.find('.delivery_order_address').val($tableRow.find('.deliveryOrderAddress').text());
//Append clone
$clone.appendTo('#products');
}
}
//Else remove when a corresponding element is found.
else {
$('#products div[data-checkboxid="' + checkboxId + '"]').remove();
}
});
});
});
#productrow_dummy {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class=" list-group items">
<table class="table table-striped table-search" id="myTable">
<thead>
<th><input type="checkbox" name="check"></th>
<th>Order ID</th>
<th>City</th>
<th>Receiver Address</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="1234 Kathmandu Koteshwor 3000" id="1234 Kathmandu Koteshwor 3000"></td>
<td class="orderId">1234</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="123 Kathmandu Koteshwor 3000" id="123 Kathmandu Koteshwor 3000"></td>
<td class="orderId">123</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="12 Kathmandu Koteshwor 3000" id="12 Kathmandu Koteshwor 3000"></td>
<td class="orderId">12</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="14 Kathmandu Koteshwor 3000" id="14 Kathmandu Koteshwor 3000"></td>
<td class="orderId">14</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="123456 Kathmandu Koteshwor 3000" id="123456 Kathmandu Koteshwor 3000"></td>
<td class="orderId">123456</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td><input type="checkbox" class="rowSelect" name="check" data-filter-item data-filter-name="1234567 Kathmandu Koteshwor 3000" id="1234567 Kathmandu Koteshwor 3000"></td>
<td class="orderId">1234567</td>
<td class="deliveryOrdeCity">Kathmandu</td>
<td class="deliveryOrderAddress">Koteshwor</td>
<td>Rs. 3000</td>
</tr>
</tbody>
</table>
</div>
<input type="button" id="delivery-assignment-ok" name="delivery-assignment-ok" class="btn-primary ok" value="Assign Task">
<div class="row">
<div class="col-md-12">
<div class="heading">
<h3>Other Details</h3>
</div>
<div id="products">
</div>
<div id="productrow_dummy">
<div class="deliverydata">
<div class="row form-group">
<div class="col col-md-4">
<label>Order ID</label>
<input type="text" name="delivery_orderId[]" class="form-cont## Heading ##rol delivery_orderId">
</div>
<div class="col col-md-4">
<label>City</label>
<input type="text" name="delivery_order_location[]" class="form-control delivery_order_city">
</div>
<div class="col col-md-4">
<label>Receiver Address</label>
<input type="text" name="delivery_order_location[]" class="form-control delivery_order_address">
</div>
<button class="btn btn-delete">Delete</button>
</div>
</div>
</div>
</div>