 <link href="packages/select2/dist/css/select2.css" rel="stylesheet" />
<form name="payeeForm" id="payeeForm">
<div class="col-md-12">
<div class="form-group">
<label for="payee_name">Invoices Associated with this Payee</label>
<div class="input-group">
<select class="form-control autocomplete" name="payee_invoice" id="payee_invoice" data-placeholder="SELECT INVOICE" style="width:100%">
<option value="">SELECT INVOICE</option>
<?php echo $_REQUEST['data']?>
</select>
</div>
</div>

<div class="form-group">
<textarea id="invoiceList" name="invoiceList" class="form-control"></textarea>
</div>

</div>

</form>



<script src="packages/select2/dist/js/select2.full.min.js"></script>
<script>
$('#popupBox .modal-header').html('<a href="javascript:void(0)" class="sa">Payee Invoices</a>')
$('#popupBox .modal-footer').html('<a id="btnConfirm" href="javascript:void(0)" class="btn btn-info mr-5">Save</a><a id="btnCancel" href="javascript:void(0)" class="btn btn-danger">Cancel</a>');
$("#btnCancel").click(function(){$('#popupBox').modal('hide');})

$("#payee_invoice").change(function(){
var v=$(this).val();
$("#invoiceList").append(v+', ')
})


$("#btnConfirm").click(function(){
var name=$("#invoiceList").val();
//alert(reg)
if(name===""){
response('danger','YOU SELECT AT LEST ONE INVOICE');
}
else{$("#payeeForm").submit()}
})

$("#payeeForm").submit(function(event){
event.preventDefault();
var vals=$("#invoiceList").val();
response('success','The invoices have been included successfully');
$('#invoices').val(vals);
$('#popupBox').modal('hide')


});
$('.autocomplete').select2()
</script>