Opening multiple dialogs from a select box

Opening multiple dialogs from a select box

I can open a dialog when I click on an option in my select box but when i try to open a second one the first one closes. Can't figure out why it is closing. Any help would be appeiciated. Thanks 


// Builds list of tests in the update dialog
    function loadTests(testList) {
// Ctrates dropdown with list of active reports
$(testList).find('test').each(function(index, element) {
var id = $(this).find('id').text();
var name = $(this).find('name').text();
console.log(id + ':' + name);
            <!-- START: Reports Menu -->
$("#reports").append(
'<option id="' + id + '" value="' + name + '">' + name + '</option>'
)
});
        $( document ).on("change", "#reports", function(){
var id = $(this).find("option:selected").attr("id");
var name = $(this).val();
console.log(id + ':' + name);
var options = {
id: id,
title: name,
height: 800,
width: 600,
show: {
effect: "slideDown",
duration: 800
},
minWidth: 100,
minHeight: 100,
resizable: true
}
$("#dialog-wrapper").dialog(options).dialog("open").append(
'<div>' +   
               
'</div>'
)
        })
}