Create nested dynamic input in jquery - html

Question

I have this form that the user can input multiple data using dynamic input of jquery. I want to add a new variant when the button is click and add also a dynamic input inside it. My problem is when im adding new data to the newly created variant it also add to the previous variant. I want it to be seperate when im adding value.
`
$(document).ready(function(){
var counter= 0;
function add_variant(counter){
var html='';
html+= '<div class="row" id="variantTitle"><div class="col"><div class="form-group"><label for="variant">Select Variant</label><select class="custom-select border-success variant" name="variant" id="variant"><option value="">Select</option><?php echo fill_variant_box($conn); ?></select></div></div></div>';
return html;
}
function add_input_field(){
$('#testBtn').remove();
$('#cancelBtn').remove();
var html='';
html+='<table class="table table-bordered"><tr><th>Category</th><th>Item Name</th><th>Quantity</th><th>Button</th></tr>';
html+='<tbody class="dynamicAdd"><tr>';
html+='<td><select class="custom-select category border-success" name="category" id="category"><option value="-Select-">-Select-</option><?php echo fill_category_select_box($conn); ?></select></td>'
html+='<td><input class="form-control border-success name_items" id="name_items" name="name_items" autocomplete="off"></td>';
html+='<td><input class="form-control quantity border-success" type="text" name="quantity" id="quantity"></td>';
html+= '<td><button type="button" class="btn btn-success" id="btnAdd">Add</button></td>'
html+='</tr></tbody></table>';
return html;
}
var appendedTable = '<tr>'+
'<td><select class="custom-select category border-success" name="category" id="category"><option value="-Select-">-Select-</option><?php echo fill_category_select_box($conn); ?></select></td>'+
'<td><input class="form-control border-success name_items" id="name_items" name="name_items" autocomplete="off"></td>'+
'<td><input class="form-control quantity border-success" type="text" name="quantity" id="quantity"></td>'+
'<td><button type="button" class="btn btn-danger" id="btnRemove">Remove</button></td></tr>';
$('#add-form').append(add_input_field());
$(document).on('click','#btnRemove', function(){
$(this).closest('tr').remove();
});
$('#add-form').append('<button type="button" class="btn addDonate" id="testBtn">Save</button>');
$('#add-form').append('<button type="button" class="btn cancelBtn" id="cancelBtn">Cancel</button>');
$(document).on('click', '#btnAdd',function(){
$('.dynamicAdd').append(appendedTable);
});
});
then this is the code when im adding new variant
$(document).on('click','#addVar',function(){
function add_input_field(){
$('#testBtn').remove();
$('#cancelBtn').remove();
var html='';
html+='<table class="table table-bordered"><tr><th>Category</th><th>Item Name</th><th>Quantity</th><th>Button</th></tr>';
html+='<tbody class="dynamicAdd"><tr>';
html+='<td><select class="custom-select category border-success" name="category" id="category"><option value="-Select-">-Select-</option><?php echo fill_category_select_box($conn); ?></select></td>'
html+='<td><input class="form-control border-success name_items" id="name_items" name="name_items" autocomplete="off"></td>';
html+='<td><input class="form-control quantity border-success" type="text" name="quantity" id="quantity"></td>';
html+= '<td><button type="button" class="btn btn-success" id="btnAdd">Add</button></td>'
html+='</tr></tbody></table>';
return html;
}
$('#add-form').append(add_input_field());
});
`
I want to create a dynamic input within a dynamic input.