ajaxform select2 concatenate multiple IDs - concatenation

Question

I have a select2 search form with an ajaxform that concatenates new form entries into the original select2 search form. If more than one new entry is added, the new text values concatenate correctly into the search field, however, any new hidden ID replaces the existing one. It appears to be added because all new text values shows in the select2 search field. I think the issue is that the new ID should be concatenating to the hidden cropstageid field in addition to the text field concatenating to the search field. I'm not sure how to do this. Your help is appreciated.
<script>
$(document).ready(function() {
$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});
$('#btnSubmit').on('click', function() {
$.ajax({
asynch : true,
type : 'POST',
dataType : 'json',
url: '../cfc/stages.cfc?method=addstage&returnformat=json',
//all form fields submitted to url
data: $("form").serialize(),
success : function(data, textStatus) {
//close the modal
$('#stagemodal').modal('hide');
//set the returned data to a variable
var fullname = $('#stagename').val();
$("#cropstageid").val(data.DATA);
//get current selection
var selection = $(search).select2("data");
//add a new item to the selection
selection.push({id: data.DATA, text: fullname})
//set the updated selection
$(search).select2("data",selection);
//reset form
$('#addstageform')[0].reset();
//output data to console
console.log(data.DATA);
}
});
});
});
</script>
<cfform name="stageform" id="stageform" action="settings_form_action.cfm" method="post" ENCTYPE="multipart/form-data">
<h4 class="text-primary">Select Crop Stages</h4>
<input type="hidden" id="cropstageid" name="cropstageid">
<cfselect id="search" multiple name="cropstageid" >
<cfloop query="stages" >
<option value="#cropstageid#" >#stage#</option>
</cfloop>
</cfform>
*AjaxForm for new entries
<cfform id="addstageform" name="addstageform" action="" method="post">
<input type="text" name="stagename" id="stagename" autofocus size="35">
<input type="button" id="btnSubmit" value="Add" /><
</cfform>

Answer 1

Thanks to the help of a colleague, the solution is below:
in success we are no longer attaching to a hidden field, so remove
$("#cropstageid").val(data.DATA);
in success, add  
$('#search').append('' + fullname + '');
this line adds another select option from the newly added ajaxform record
no longer need hidden value since it is attaching as the select option, so delete hidden cropstageid form field inside the form.
The cleaned up script is below:
<script>
$(document).ready(function() {
$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});
$('#btnSubmit').on('click', function() {
$.ajax({
asynch : true,
type : 'POST',
dataType : 'json',
url: '../cfc/stages.cfc?method=addstage&returnformat=json',
//all form fields submitted to url
data: $("form").serialize(),
success : function(data, textStatus) {
//close the modal
$('#stagemodal').modal('hide');
//set the returned data to a variable
var fullname = $('#stagename').val();
//get current selection
var selection = $('#search').select2("data");
//add the new option to the select
$('#search').append('<option value="' + data.DATA + '">' + fullname + '</option>');
//add a new item to the selection array
selection.push({
id: data.DATA,
text: fullname
});
//set the updated selection
$('#search').select2("data",selection);
//reset the modal form
$('#addstageform')[0].reset();
//output to the console
console.log(data.DATA);
}
});
});
});
</script>